jquery给动态⽣成的标签绑定事件的⼏种⽅法总结
经常遇到给动态⽣成的标签绑定事件不好⽤，⾃⼰简单测试总结了下，结论如下了：
<body>
<!-- 下⾯是⽤纯动态⽅式⽣成标签 -->
<div id="d2">
⽣成a标签
</div>
<div id="d3">
<input type="button" value="⽣成a标签" id="btn" />
</div>
</body>
<script>
$(function(){
$('#btn').bind('click', function(event) {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li>Hello</li>").appendTo("#d2");
});
///bind⽅法对于动态添加的标签不好使，只对已经存在的静态标签好⽤
$('li').bind('click', function(event) {
alert("haha"); ///根本不会触发这个⽅法
});
})
</script>
点击按钮，就会在d2中添加⼀个li标签，这个可以。
但是，如果这样在初始化时，⽤bind⽅法给将来要动态⽣成的li标签绑定⽅法是⽆效的，点击⽣成的li标签，没有任何反应。
因为bind⽅法只能给在执⾏它时已经存在的静态标签jq对象绑定事件，对未来动态添加的标签是⽆效的。
这时，可以有⼏种⽅法来解决这个问题：
⽅法⼀：
<body>
<!-- 下⾯是⽤纯动态⽅式⽣成标签 -->
<div id="d2">
动态⽣成a标签
</div>
<div id="d3">
<input type="button" value="⽣成a标签" id="btn"/>
</div>
</body>
<script>
$(function() {
///点击按钮，给d2动态添加标签
$('#btn').bind('click', function() {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li onclick='show()'>Hello</li>").appendTo("#d2");
});
})
function show() {
alert($(this).text());///这样打印出的是空的，没有任何东西，但是⽅法是会触发的（不能这样打印⾃⼰）
alert("哈哈");
}
</script>
这种⽅法是在动态拼接时就拼接好js原⽣的要触发的事件，然后把事件⽅法定义在script标签中。这种⽅法可以触发li的点击事件。但是如果要⽤alert($(this).text())这种打印标签⾃⼰本⾝信息的东西的⽅法，是没有任何结果显⽰的。这个即使是静态的标签打印⾃⼰也是不会有显⽰的。
要解决这个问题，可以⽤下⾯两种⽅法。
⽅法⼆：
<body>
<!-- 下⾯是⽤纯动态⽅式⽣成标签 -->
<div id="d2">
⽣成a标签
</div>
<div id="d3">
<input type="button" value="⽣成a标签" id="btn"/>
</div>
</body>
<script>
$(function(){
$('#btn').bind('click', function(event) {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li>Hello</li>").appendTo("#d2").bind('click', function() {
/* 显⽰标签的内容 */
alert($(this).text()); ///这种⽅式也可以正常打印出 hello
});
});
})
</script>
这种⽅式是可以解决上⾯问题的。虽然它⽤的也是bind⽅法，但是注意，它是先有⽬的标签对象然后才调⽤的bind⽅法，所以也是好⽤的。⽽且它居然可以正常打印⾃⼰的信息，⾮常厉害。
⽅法三：
<body>
jquery是什么选择器<!-- 下⾯是⽤纯动态⽅式⽣成标签 -->
<div id="d1">
测试静态标签的绑定⽅法
</div>
<br />
<div id="d2">
动态⽣成a标签的位置
</div>
<div id="d3">
<input type="button" value="⽣成a标签" id="btn" />
</div>
</body>
<script>
$(function(){
$('#btn').bind('click', function() {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li>Hello</li>").appendTo("#d2");
});
///bind⽅法对于动态添加的标签不好使，只对已经存在的静态标签好⽤
///⽤live⽅法才好⽤
$('li').live('click', function() {
alert($(this).text());///注意，⽤live还可以这样写，结果是正常的
alert("haha");
});
///通过 live() ⽅法附加的事件处理程序适⽤于匹配选择器的当前及未来的元素（⽐如由脚本创建的新元素）
$('#d1').live('click', function() {///对于静态和动态创建的标签都好使
alert($(this).text());///注意，⽤live还可以这样写，结果是正常的.这是⾮常重要的
alert("haha");
});
})
</script>
这种就是⽤jq的⾮常好⽤的既可以动态也可以静态绑定现在或者未来各种标签的live⽅法。⽽且它最神奇的地⽅是也能打印⾃⼰。我靠，太⽜了。以后就⽤它了。
暂时还没发现这个live⽅法有什么弱点啊！
新⼿⼀枚，欢迎⼤神指正各种错误！
以上这篇jquery 给动态⽣成的标签绑定事件的⼏种⽅法总结就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。