jquery怎麼給動態產生的標籤綁定事件
- php中世界最好的语言原創
- 2018-03-14 16:31:501774瀏覽
這次帶給大家jquery怎麼給動態產生的標籤綁定事件，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>
點擊按鈕，就會在d2中加入一個li標籤，這個可以。
但是，如果這樣在初始化時，用bind方法給將來要動態產生的li標籤綁定方法是無效的，點選產生的li標籤，沒有任何反應。
因為bind方法只能給在執行它時已經存在的靜態標籤jq物件綁定事件，對未來動態新增的標籤是無效的。
這時，可以有幾個方法來解決這個問題：
方法一：
<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>
這個方法是在動態拼接時就拼接好js原生的要觸發的事件，然後把事件方法定義在script標籤中。這種方法可以觸發li的點擊事件。但是如果要用alert($(this).text())這種印出標籤自己本身資訊的東西的方法，是沒有任何結果顯示的。這個即使是靜態的標籤列印自己也是不會有顯示的。
要解決這個問題，可以用下面兩種方法。
方法二：
<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>
這種方式是可以解決上面的問題。雖然它用的也是bind方法，但要注意，它是先有目的標籤物件然後才呼叫的bind方法，所以也是好用的。而且它居然可以正常列印自己的訊息，非常厲害。
方法三：
<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>
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
jQuery的isPlainObject ()方法該如何使用
以上是jquery怎麼給動態產生的標籤綁定事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn