jQuery:如何给动态生成的元素绑定事件?

jQuery的html()可以给现在元素附加新的元素,innerHTML也可以,那么,如何给这些新生成的元素绑定事件呢?直接在元素还未生成前就绑定肯定是无效的,因为所绑定的元素目前根本不存在。

然而,jQuery为我们提供了一个函数来解决这个问题,它就是.live()(备注:jquery的后期版本变为.on() ),它可以给所有元素绑定事件,不论是已有的,还是将来生成的,比如:

$(‘#div’).live(‘click’,function(){
//do stuff
});

它还可以同时绑定多个事件:

$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});

【实例】

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
</script>
<html>
<body>
<input type="button" name="input[]" value="按钮1" />
<input type="button" name="input[]" value="按钮2" />
<input type="button" name="input[]" value="按钮3" />
<a id="add">添加</a>
</body>
</html>
<script type="text/javascript">
$("#add").click(function() {
var inp = $(":input:last").clone();
$(":input:last").after(inp);
}) // 为每一个button绑定onclick事件,alert一下
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function() {
alert("我测试一下");
}
} $(':input').live('click',function() {
alert("我再测");
});
</script>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
</script>
<html>
<body>
<input type="button" name="input[]" value="按钮1" />
<input type="button" name="input[]" value="按钮2" />
<input type="button" name="input[]" value="按钮3" />
<a id="add">添加</a>
</body>
</html>
<script type="text/javascript">
$("#add").click(function() {
var inp = $(":input:last").clone();
inp2 = inp.val("按钮"+($(":input").length+1));
inp3 = inp2.attr("id","a"+($(":input").length+1))
$(":input:last").after(inp3);
}) //为每一个button绑定onclick事件,alert一下
//var inputs = document.getElementsByTagName("input");
//预先加载,inputs.length最大等于3
for (var i = 0; i < 99; i++) {
$("#a"+i).live('click',function(){
alert($(this).val());
})
} $(':input').live('click',function() {
alert($(this).val());
});
</script>
上一篇:React源码剖析系列 - 生命周期的管理艺术


下一篇:Flex通过Blazeds利用Remoteservice与后台java消息推送