jQuery为新增元素绑定事件

为动态添加的html元素添加事件,如我们用append添加了一个div,想在点击的时候执行一些动作。
1.一个简单的方法,将click()事件紧跟在append()后面,写在同一个函数里面:
[code]
$(document).ready(function(){
$("#a").click(function(){
$('#a').append('

Hello World

');
$("#b").click(function(){
//一些动作
});
});
//不过写在这里就不可以了,必须紧跟在append后面 的同一个函数里面。
});
[/code]
注意:上面代码实际是有bug的,比如重复添加。

2.使用live()函数:
首先jquery里面有个用来绑定事件的bind()函数:
[code]
$(".classname").click(function(){
//代码
});
$(".classname").bind('click', function() {
//操作代码
});
[/code]
这样可以给页面具有class="classname"的元素绑定点击事件,但是如果以后新增了某个标签也具有classname类,这个新增的标签就不具有click事件。live()就可以解决这个问题。
[code]
$(".classname").live('click', function() {
//操作代码
});
[/code]
通过live()方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

使用jQuery的live()方法绑定事件,有时会出现重复绑定的情况,如,当点击一个按钮时,此按钮所绑定的事件会并执行n遍。可以使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件。

[code]
//先通过die()方法解除,再通过live()绑定
$(".classname").die().live("click",function(){
//事件运行代码
});
[/code]

您的赞助将会支持作者创作及本站运维

发表评论


TOP