經(jīng)常遇到給動態(tài)生成的標(biāo)簽綁定事件不好用，自己簡單測試總結(jié)了下，結(jié)論如下了：
<body> <!-- 下面是用純動態(tài)方式生成標(biāo)簽 --> <div id="d2"> 生成a標(biāo)簽 </div> <div id="d3"> <input type="button" value="生成a標(biāo)簽" id="btn" /> </div> </body> <script> $(function(){ $('#btn').bind('click', function(event) { /* 在添加標(biāo)簽的同時給添加的標(biāo)簽綁定點(diǎn)擊事件 */ $("<li>Hello</li>").appendTo("#d2"); }); ///bind方法對于動態(tài)添加的標(biāo)簽不好使，只對已經(jīng)存在的靜態(tài)標(biāo)簽好用 $('li').bind('click', function(event) { alert("haha"); ///根本不會觸發(fā)這個方法 }); }) </script>點(diǎn)擊按鈕，就會在d2中添加一個li標(biāo)簽，這個可以。
但是，如果這樣在初始化時，用bind方法給將來要動態(tài)生成的li標(biāo)簽綁定方法是無效的，點(diǎn)擊生成的li標(biāo)簽，沒有任何反應(yīng)。
因?yàn)閎ind方法只能給在執(zhí)行它時已經(jīng)存在的靜態(tài)標(biāo)簽jq對象綁定事件，對未來動態(tài)添加的標(biāo)簽是無效的。
這時，可以有幾種方法來解決這個問題：
方法一：
<body> <!-- 下面是用純動態(tài)方式生成標(biāo)簽 --> <div id="d2"> 動態(tài)生成a標(biāo)簽 </div> <div id="d3"> <input type="button" value="生成a標(biāo)簽" id="btn"/> </div> </body> <script> $(function() { ///點(diǎn)擊按鈕，給d2動態(tài)添加標(biāo)簽 $('#btn').bind('click', function() { /* 在添加標(biāo)簽的同時給添加的標(biāo)簽綁定點(diǎn)擊事件 */ $("<li onclick='show()'>Hello</li>").appendTo("#d2"); }); }) function show() { alert($(this).text());///這樣打印出的是空的，沒有任何東西，但是方法是會觸發(fā)的（不能這樣打印自己） alert("哈哈"); } </script>這種方法是在動態(tài)拼接時就拼接好js原生的要觸發(fā)的事件，然后把事件方法定義在script標(biāo)簽中。這種方法可以觸發(fā)li的點(diǎn)擊事件。但是如果要用alert($(this).text())這種打印標(biāo)簽自己本身信息的東西的方法，是沒有任何結(jié)果顯示的。這個即使是靜態(tài)的標(biāo)簽打印自己也是不會有顯示的。
要解決這個問題，可以用下面兩種方法。
方法二：
<body> <!-- 下面是用純動態(tài)方式生成標(biāo)簽 --> <div id="d2"> 生成a標(biāo)簽 </div> <div id="d3"> <input type="button" value="生成a標(biāo)簽" id="btn"/> </div> </body> <script> $(function(){ $('#btn').bind('click', function(event) { /* 在添加標(biāo)簽的同時給添加的標(biāo)簽綁定點(diǎn)擊事件 */ $("<li>Hello</li>").appendTo("#d2").bind('click', function() { /* 顯示標(biāo)簽的內(nèi)容 */ alert($(this).text()); ///這種方式也可以正常打印出 hello }); }); }) </script>這種方式是可以解決上面問題的。雖然它用的也是bind方法，但是注意，它是先有目的標(biāo)簽對象然后才調(diào)用的bind方法，所以也是好用的。而且它居然可以正常打印自己的信息，非常厲害。
方法三：
<body> <!-- 下面是用純動態(tài)方式生成標(biāo)簽 --> <div id="d1"> 測試靜態(tài)標(biāo)簽的綁定方法 </div> <br /> <div id="d2"> 動態(tài)生成a標(biāo)簽的位置 </div> <div id="d3"> <input type="button" value="生成a標(biāo)簽" id="btn" /> </div> </body> <script> $(function(){ $('#btn').bind('click', function() { /* 在添加標(biāo)簽的同時給添加的標(biāo)簽綁定點(diǎn)擊事件 */ $("<li>Hello</li>").appendTo("#d2"); }); ///bind方法對于動態(tài)添加的標(biāo)簽不好使，只對已經(jīng)存在的靜態(tài)標(biāo)簽好用 ///用live方法才好用 $('li').live('click', function() { alert($(this).text());///注意，用live還可以這樣寫，結(jié)果是正常的 alert("haha"); }); ///通過 live() 方法附加的事件處理程序適用于匹配選擇器的當(dāng)前及未來的元素（比如由腳本創(chuàng)建的新元素） $('#d1').live('click', function() {///對于靜態(tài)和動態(tài)創(chuàng)建的標(biāo)簽都好使 alert($(this).text());///注意，用live還可以這樣寫，結(jié)果是正常的.這是非常重要的 alert("haha"); }); }) </script>這種就是用jq的非常好用的既可以動態(tài)也可以靜態(tài)綁定現(xiàn)在或者未來各種標(biāo)簽的live方法。而且它最神奇的地方是也能 打印自己。我靠，太牛了。以后就用它了。
暫時還沒發(fā)現(xiàn)這個live方法有什么弱點(diǎn)啊！
新手一枚，歡迎大神指正各種錯誤！
以上這篇jquery 給動態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
