Jquery向页面append新元素之后,如何解决事件的绑定问题?
今天有get到一个新知识点,就是当我们向页面添加新的元素之后,加载之前的函数方法就对新元素失效了,下面我来说说如何解决这个问题的?
我先看jq api文档没有找到方法,无果只好到网上找些资料,果然找到live方法。
其实很简单:
1.这是项目要求达到的效果,当我没用live事件,只用了简单的hover事件时:hover事件没有加载进来,没有我想要的边框效果,效果图如下
/*经过用户技能标签增加样式*/
$(function(){
$(".s-edited").hover(function(){
$(this).toggleClass("borderd");
})
})
2.当我用了live之后,效果达到了,如下图:
代码如下:
/*经过用户技能标签增加样式*/
$(".s-edited").live("hover",function(){
$(this).toggleClass("borderd");
})
我仔细的看了一下关于live的介绍,
给所有当前以及 将来 会匹配的元素绑定一个事件处理函数(比如hover事件)。也能绑定自定义事件。
PS:我是新手菜鸟,大神勿喷!
Jquery向页面append新元素之后,如何解决事件的绑定问题?的更多相关文章
- 解决Jquery向页面append新元素之后事件的绑定问题
/*经过用户技能标签增加样式*/ $(".s-edited").live("hover",function(){ $(this).toggleClass(&qu ...
- 【WEB】jQuery获取页面回滚或跳转事件
1.效果: 2.Jquery: //记得引入jquery.min.js <script type="text/javascript"> $(function(){ wi ...
- 用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery在页面加载完成后再append的元素事件无效问题
最近遇到一个问题,jquery在页面加载完成后再append的元素,append元素上有onclick事件,但是在append的元素上怎么点击都不会触发onclick事件.就如: <ul cla ...
- 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法
今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...
- [转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...
- Jquery方法load之后导致js失效解决方法
Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...
随机推荐
- 使用html5 FileReader获取图片,并异步上传到server(不使用iframe)
使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...
- hook 鼠标键盘消息实例分析
1.木马控制及通信方法包含:双管道,port重用.反弹技术.Hook技术,今天重点引用介绍一下hook的使用方法,hook信息后能够将结果发送到hacker邮箱等.实现攻击的目的. 转自:http:/ ...
- luogu2024 食物链
题目大意 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B吃 C,C 吃 A.现有 N 个动物,以 1 - N 编号.每个动物都是 A,B,C 中的一种,但是我们并 ...
- hihocoder 1680 hiho字符串2 dp求方案数+递归
我们定义第一代hiho字符串是"hiho". 第N代hiho字符串是由第N-1代hiho字符串变化得到,规则是: h -> hio i -> hi o -> ho ...
- 【转】iOS开发-关闭/收起键盘方法总结
原文网址:http://www.cnblogs.com/GarveyCalvin/p/4167759.html 前言:作为IOS开发人员,需要经常和表单打交道.因此我对收起键盘的方法作了下总结,IOS ...
- A Round Peg in a Ground Hole(圆与凸包)
http://poj.org/problem?id=1584 题意:判断所给的点能不能形成凸包,并判断所给的圆是否在凸包内. 改了好几天的一个题,今天才发现是输入顺序弄错了,办过的最脑残的事情..sa ...
- Android开发中的日期格式化
下面的转换符来自Java,但是在android中同样可用.(以下表格内容来自互联网.) 常见日期格式化转换符 转换符 说 明 示 例 %te 一个月中的某一天(1-31) 2 %tb 指定语言环 ...
- python 7:del 列表指定元素、list.pop(索引)、list.remove(元素值)(删除列表指定元素,且不可再使用;默认索引-1,弹出指定列表元素,可再使用;移除列表指定第一个元素)
bicycles = ['trek', 'cannondale', 'redline', 'specialized'] print(bicycles) del bicycles[0] #删除指定列表元 ...
- wap网测一道题目
1. 给定一个字符串s, 1 <= len(s) <= 3000, 定义odd palindrome string为长度为奇数的回文串, 求s中该奇回文串的个数. 比如axbcba , 结 ...
- MySql c#通用类 转
using System;using System.Data;using System.Configuration;using System.Collections.Generic;using Sys ...