现在的web项目,不使用jquery的恐怕极少。但是在使用jquery时,也会发现一些异常的情况。
一般我们如下绑定点击等事件:
<div class="music">
<ul>
<li>01.mp3</li>
<li>02.mp3</li>
</ul>
</div>
$(function(){
$(".music").find("li").on('click',function(){
$("#myAudio").attr("src", "music/"+$.trim($(this).text()));
});
//... ...
});
因为该绑定事件是在一打开网页时,就进行了绑定,对于页面上已经存在的符合条件的 li 标签绑定了点击事件,但是如果在打开网页之后,通过 jquery 函数 append('<li> ....</li>')或者
prepend('<li>....</li>') 再一次插入页面上的 li 元素就不在上面的绑定范围之内了,因为这些 li 元素是在 $(function(){...}); 执行之后,才出现在页面上的。所以理所当然,就不受他的控制了。
解决方法形如下面处理:
1.方法一:
append('<li onclick="some_function()">....</li>');
这样处理就行了,就是在创建 li 标签的时间,内联绑定 onclick 事件来处理,就像css样式内联一样。这是最简单的处理方法,但是这样的话事件和html就绑定在一起了,代码耦合太过了。
2.方法二:
可以在
li元素的共同的祖先元素比如ul中进行绑定事件,这样即使是后面插入的li,也会因为事件冒泡机制而触发事件,而得到执行。
$(function(){
$(".music").find("ul").on('click', function(){
$("#myAudio").attr("src", "music/"+$.trim($(this).text()));
});
});
但是在祖先元素上绑定事件,有个缺点,即 this 对象发生了变化,this对象变成了祖先元素,要特别注意这点,如果代码中要使用到this对象,比如本例中。那么就会发生错误!所以上面的代码其实是错误的。但是此时也还是有解救的方法:
$(function(){
$(".music").find("ul").on('click', 'li', function(){
alert(this); //[object HTMLLIElement]
alert(event.target); //[object HTMLLIElement]
alert(event.currentTarget); //[object HTMLLIElement]
$("#myAudio").attr("src", "music/"+$.trim($(this).text()));
});
});
使用事件的委托机制,加入一个过滤的参数 'li' ,此时代码中的 this 对象就是 li 而不是他的祖先 ul 了。我们看到this==event.target==event.currentTarget
所以在使用冒泡机制的事件委托时,如果使用到了 this 对象,一定要将实际的那个点击对象,通过过滤参数参入进去。这样 this 对象才是那个实际点击的对象,不然this对象就成了选择对象了。
我们查看jquery的文档如下:
返回值:jQuery on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
3.方法三
使用event的属性target。我们知道每一个事件都有一个event对象,他的event.target就是我们直接点击的对象,而event.currentTarget是事件冒泡过程中冒泡到哪里,就代表哪个对象,所以冒泡结束时event.currentTarget代表的就是我们在哪个父元素上绑定事件,他就代表哪个对象,我们可以使用下面的代码进行测试:
$(".music").find("ul").on('click',function(event){
alert(this); //[object HTMLUListElement]
alert(event.target); //[object HTMLLIElement]
alert(event.currentTarget); //[object HTMLUListElement]
$("#myAudio").attr("src", "music/"+$.trim($(event.target).text()));
});
我们在li的父元素ul上进行绑定,那么冒泡结束,也就是事件进行处理时,this代表的是event.currentTarget,而不是event.target。上面我们可以清楚的看到这一点!清楚了这一点,我们就可以使用 event.target 来获取我们直接点击的那个对象,获得他的属性,设置他的属性,对他进行各种操作。
我们一定要明白this 和 event.target, event.currentTarget三者的联系和区别。在利用冒泡机制进行事件处理时,一定不要错误地将this 和 event.target等同!
3.方法四
使用jquery的live()函数来绑定事件,但是jquery-1.11.1已经不支持live()函数了。从1.7开始推荐使用delegate函数来代替。
3.方法四
使用delegate()函数:
$(".music").find("ul").delegate('li', 'click', function(event){
alert(this); //[object HTMLLIElement]
alert(event.target); //[object HTMLLIElement]
alert(event.currentTarget); //[object HTMLLIElement]
$("#myAudio").attr("src", "music/"+$.trim($(this).text()));
});
我们看到使用delegate()函数是,this == event.target == event.currentTarget.所以此时可以使用this来获得我们直接点击的那个元素。
jquery文档:
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)
从上面我们可以看到,加入了过滤参数的on绑定函数和delegate函数是等价的。所以目前推荐一切事件绑定都使用on函数,因为在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,完全取代 .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off()。
我们甚至可以将事件绑定到body上:
$("body").on('click', '.music li', function(event){
alert(this); //[object HTMLLIElement]
alert(event.target); //[object HTMLLIElement]
alert(event.currentTarget); //[object HTMLLIElement]
$("#myAudio").attr("src", "music/"+$.trim($(this).text()));
});
总结:
1)理解 event, event.target, event.currentTarget, this
2)事件冒泡机制
3)一切事件绑定事件推荐使用on函数,事件代理一定要指定on函数的过滤参数,也就是event。target对象。
4)非事件代理中,this, event.currentTarget 都是变化的,event.target始终指向直接触发事件的那个元素。但是在事件代理中,三者是一致的,都是指直接触发事件的元素。
分享到:
相关推荐
1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用。 2.解决办法: 举例:如果在一个”title”>中,通过append添加一个id=”demo”的按钮,常用的直接$(...
今天在写JQUERY时遇到个问题:当使用脚本动态添加元素xxx时,但事件$(“.x .y”).click(function)…失效问题。 刚开始网上找到了用live函数,方法如下: 事件绑定:$(“.x .y”).click(function) 需改为: 代码如下:...
下面小编就为大家带来一篇Jquery对新插入的节点 绑定Click事件失效的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件...
是一个通过jquery实现的,为需要的图片添加图层,达到一个置灰的效果。
①jQuery中的$(doucument).ready()事件 ready(fn)是jQuery事件模块中最重要的一个函数。这个方法可以看作是对[removed]注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪时立刻调用所绑定的函数,而几乎所有...
jquery api官方的例子在新增的元素上添加事件 $[removed]("click",'#lyysb a',function(){ if(!$(this).hasClass('cur')){ $(this).addClass('cur'); } else { $(this).removeClass('cur'); } }); on() 方法在...
近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用。 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器。而live事件:为当前或未来的匹配元素添加一个或多个事件处理器。 ...
点击添加后,会新添加一行,但是二级联动就失效了, $('.provinceList').live('change', function(){ var provinceId = $(this).val(); var obj = $(this); $.post('/yuyue/ajaxCityList', {'provinceId':...
当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件): 实例 <script type="text/javascript" src="jquery.js"> ...
解绑就是接触绑定,绑定的事件失效 要注意,iQuery中的 .事件 如(.click())其实就是单个的绑定事件的简写(bind(“click”)) html: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN> <...
代码如下: ”” xss=removed></li> 虽然在很多时候,都是非常不推荐这样写的,但是还有有些时候会... 办法就是使用jquery 绑定. 代码如下: $(“#id”).attr(“onclick”,””).click(function(){ // }); 这里需要先清
datagrid:添加“onBeforeSelect”、“onBeforeCheck”、“onBeforeUnselect”和“onBeforeUncheck”事件; propertygrid:允许用户使用“beginEdit”方法进行行编辑; datebox:添加“cloneFrom”方法来快速创建...
jQuery – 获取并设置 CSS 类 通过 jQuery,可以很容易地对 CSS 元素进行操作。 切换 CSS 类 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些: addClass() – 向被选元素添加一个或多...
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...