下面我就為大家分享一篇jquery 給動態產生的標籤綁定事件的幾種方法總結，具有很好的參考價值，希望對大家有所幫助。
常常遇到給動態產生的標籤綁定事件不好用，自己簡單測試總結了下，結論如下了：
##
<body>
<!-- 下面是用纯动态方式生成标签 -->
<p id="d2">
生成a标签
</p>
<p id="d3">
<input type="button" value="生成a标签" id="btn" />
</p>
</body>
<script>
$(function(){
$('#btn').bind('click', function(event) {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li>Hello</li>").appendTo("#d2");
});
///bind方法对于动态添加的标签不好使，只对已经存在的静态标签好用
$('li').bind('click', function(event) {
alert("haha"); ///根本不会触发这个方法
});
})
</script>方法一：
<body>
<!-- 下面是用纯动态方式生成标签 -->
<p id="d2">
动态生成a标签
</p>
<p id="d3">
<input type="button" value="生成a标签" id="btn"/>
</p>
</body>
<script>
$(function() {
///点击按钮，给d2动态添加标签
$('#btn').bind('click', function() {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li onclick='show()'>Hello</li>").appendTo("#d2");
});
})
function show() {
alert($(this).text());///这样打印出的是空的，没有任何东西，但是方法是会触发的（不能这样打印自己）
alert("哈哈");
}
</script>方法的二：
<body>
<!-- 下面是用纯动态方式生成标签 -->
<p id="d2">
生成a标签
</p>
<p id="d3">
<input type="button" value="生成a标签" id="btn"/>
</p>
</body>
<script>
$(function(){
$('#btn').bind('click', function(event) {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li>Hello</li>").appendTo("#d2").bind('click', function() {
/* 显示标签的内容 */
alert($(this).text()); ///这种方式也可以正常打印出 hello
});
});
})
</script>方法三：
<body>
<!-- 下面是用纯动态方式生成标签 -->
<p id="d1">
测试静态标签的绑定方法
</p>
<br />
<p id="d2">
动态生成a标签的位置
</p>
<p id="d3">
<input type="button" value="生成a标签" id="btn" />
</p>
</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>###### #####
以上是在jquery中給動態產生的標籤綁定事件（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
