直接用click不能为动态元素绑定click事件？

程序猿之家 2015-11-16

展开全文

本帖最后由 wuxiaolan91 于 2012-6-4 11:04 编辑

1.出现问题：
我们一般都是为已经存在的元素去绑定事件，那么用同样的绑定方法也能正确绑定动态创建的元素吗？

我在我们孔明app的项目里动态创建了一个元素，然后我又需要为这个元素绑定事件，要点击这个动态创建的元素的时候能够在这个元素的右侧复制这个元素出来

$("动态创建的元素").click(function(){
console.log("事件已被绑定");
....
}

复制代码

。可是我用却没有半点反应,作为测试用的console语句的话不就是没出来过，后来经同事提点：你这个（绑定事件的）元素是不是动态创建的？

我就奇怪了，动态创建的元素用click事件绑定就不行了吗？

2.问题分析：
我换了on来绑定事件，结果还是不行（后来发现不是不行，而是on绑定这种动态元素得绑定在这个动态元素的父元素或者祖父元素上，再把这个动态元素作为参数传进去），on事件不行了，又开始试live这个绑定事件，ok，在live这里，绑定成功，测试的console语句出来了，看看api，特别有指出，原来live是可以为现在还未创建的动态元素绑定事件的，而bind事件则只能绑定已经存在的元素。
好吧，不多说了上Code吧。

<!doctype html>
<html>
<head>
<title>测试怎么绑定动态元素的详细情况</title>
<body>
<div id="container">
<button id="addSpan">添加元素</button>
</div>
<p id="disc">提示语句</p>
<script type="text/javascript" src="http://code./jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("#addSpan").click(function(){
$("#container").append($("<button id='clickAddEle'>click事件</button>"));
$("#container").append($("<button id='bindAddEle'>bind</button>"));
$("#container").append($("<button id='liveAddEle'>live</button>"));
$("#container").append($("<button id='onAddEle'>on</button>"));
$("#container").append($("<button id='delegateAddEle'>delegate</button>"));
});
//用click方法绑定
$("#clickAddEle").click(function(){
var tiscContent = "click为动态元素绑定事件成功1";
$("#disc").html(tiscContent);
});
$("#bindAddEle").bind("bind",function(){
var tiscContent = "bind为动态元素绑定事件成功1";
$("#disc").html(tiscContent);
});
$("#liveAddEle").live("click",function(event){
var tiscContent = "live为动态元素绑定事件成功1";
$("#disc").html(tiscContent);
});
/*
$("#liveAddEle").on("click",function(event){
var tiscContent = "on为动态元素绑定事件成功1";
$("#disc").html(tiscContent);
});
*/
$("#container").on("click","#onAddEle",function(event){
var tiscContent = "on为动态元素绑定事件成功1";
$("#disc").html(tiscContent);
});
$("#container").delegate("#delegateAddEle","click",function(event){
var tiscContent = "delegate为动态元素绑定事件成功1";
$("#disc").html(tiscContent);
});
</script>
</body>
</head>
</html>

复制代码

这里的demo你点击"添加元素"按钮后，会动态创建几个按钮，不同的按钮对应不同的方法，如果你点击了那个按钮后，下面的描述文字有更新就说明你的这个按钮所代表的绑定事件的方法是游泳的。
注意，on方法是jQuery1.7才添加进去的方法，所以如果你的jQuery版本低于这个，那么on方法就会不起作用。

3.问题总结：
为动态元素绑定事件的话，用click()，bind()，直接为这个元素绑定on()都不行，要用live()或者delegate()得给这个元素的上级元素绑定on方法，把这个元素作为参数传进去才行。