jquery 給動(dòng)態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié)
經(jīng)常遇到給動(dòng)態(tài)生成的標(biāo)簽綁定事件不好用,自己簡單測試總結(jié)了下,結(jié)論如下了:
<body> <!-- 下面是用純動(dòng)態(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)簽的同時(shí)給添加的標(biāo)簽綁定點(diǎn)擊事件 */ $("<li>Hello</li>").appendTo("#d2"); }); ///bind方法對(duì)于動(dòng)態(tài)添加的標(biāo)簽不好使,只對(duì)已經(jīng)存在的靜態(tài)標(biāo)簽好用 $('li').bind('click', function(event) { alert("haha"); ///根本不會(huì)觸發(fā)這個(gè)方法 }); }) </script>
點(diǎn)擊按鈕,就會(huì)在d2中添加一個(gè)li標(biāo)簽,這個(gè)可以。
但是,如果這樣在初始化時(shí),用bind方法給將來要?jiǎng)討B(tài)生成的li標(biāo)簽綁定方法是無效的,點(diǎn)擊生成的li標(biāo)簽,沒有任何反應(yīng)。
因?yàn)閎ind方法只能給在執(zhí)行它時(shí)已經(jīng)存在的靜態(tài)標(biāo)簽jq對(duì)象綁定事件,對(duì)未來動(dòng)態(tài)添加的標(biāo)簽是無效的。
這時(shí),可以有幾種方法來解決這個(gè)問題:
方法一:
<body> <!-- 下面是用純動(dòng)態(tài)方式生成標(biāo)簽 --> <div id="d2"> 動(dòng)態(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動(dòng)態(tài)添加標(biāo)簽 $('#btn').bind('click', function() { /* 在添加標(biāo)簽的同時(shí)給添加的標(biāo)簽綁定點(diǎn)擊事件 */ $("<li onclick='show()'>Hello</li>").appendTo("#d2"); }); }) function show() { alert($(this).text());///這樣打印出的是空的,沒有任何東西,但是方法是會(huì)觸發(fā)的(不能這樣打印自己) alert("哈哈"); } </script>
這種方法是在動(dòng)態(tài)拼接時(shí)就拼接好js原生的要觸發(fā)的事件,然后把事件方法定義在script標(biāo)簽中。這種方法可以觸發(fā)li的點(diǎn)擊事件。但是如果要用alert($(this).text())這種打印標(biāo)簽自己本身信息的東西的方法,是沒有任何結(jié)果顯示的。這個(gè)即使是靜態(tài)的標(biāo)簽打印自己也是不會(huì)有顯示的。
要解決這個(gè)問題,可以用下面兩種方法。
方法二:
<body> <!-- 下面是用純動(dòng)態(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)簽的同時(shí)給添加的標(biāo)簽綁定點(diǎn)擊事件 */ $("<li>Hello</li>").appendTo("#d2").bind('click', function() { /* 顯示標(biāo)簽的內(nèi)容 */ alert($(this).text()); ///這種方式也可以正常打印出 hello }); }); }) </script>
這種方式是可以解決上面問題的。雖然它用的也是bind方法,但是注意,它是先有目的標(biāo)簽對(duì)象然后才調(diào)用的bind方法,所以也是好用的。而且它居然可以正常打印自己的信息,非常厲害。
方法三:
<body> <!-- 下面是用純動(dòng)態(tài)方式生成標(biāo)簽 --> <div id="d1"> 測試靜態(tài)標(biāo)簽的綁定方法 </div> <br /> <div id="d2"> 動(dòng)態(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)簽的同時(shí)給添加的標(biāo)簽綁定點(diǎn)擊事件 */ $("<li>Hello</li>").appendTo("#d2"); }); ///bind方法對(duì)于動(dòng)態(tài)添加的標(biāo)簽不好使,只對(duì)已經(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() {///對(duì)于靜態(tài)和動(dòng)態(tài)創(chuàng)建的標(biāo)簽都好使 alert($(this).text());///注意,用live還可以這樣寫,結(jié)果是正常的.這是非常重要的 alert("haha"); }); }) </script>
這種就是用jq的非常好用的既可以動(dòng)態(tài)也可以靜態(tài)綁定現(xiàn)在或者未來各種標(biāo)簽的live方法。而且它最神奇的地方是也能 打印自己。我靠,太牛了。以后就用它了。
暫時(shí)還沒發(fā)現(xiàn)這個(gè)live方法有什么弱點(diǎn)??!
新手一枚,歡迎大神指正各種錯(cuò)誤!
以上這篇jquery 給動(dòng)態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 使用jquery模擬a標(biāo)簽的click事件無法實(shí)現(xiàn)跳轉(zhuǎn)的解決
- jQuery動(dòng)態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法
- 詳談jQuery unbind 刪除綁定事件 / 移除標(biāo)簽方法
- jquery 為a標(biāo)簽綁定click事件示例代碼
- jquery trigger偽造a標(biāo)簽的click事件取代window.open方法
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- jquery觸發(fā)a標(biāo)簽跳轉(zhuǎn)事件示例代碼
- Struts2的s:radio標(biāo)簽使用及用jquery添加change事件
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加標(biāo)簽事件
- JQuery?綁定select標(biāo)簽的onchange事件,彈出選擇的值,并實(shí)現(xiàn)跳轉(zhuǎn)、傳參
相關(guān)文章
jQuery實(shí)現(xiàn)驗(yàn)證用戶登錄
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)驗(yàn)證用戶登錄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12jQuery實(shí)現(xiàn)選項(xiàng)卡功能(兩種方法)
本文主要介紹了jQuery兩種方法寫選項(xiàng)卡的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03淺談jQuery頁面的滾動(dòng)位置scrollTop、scrollLeft
官方文檔的解釋有點(diǎn)含糊,其實(shí)換個(gè)角度就很容易理解了,scrollTop獲取的是內(nèi)部元素超出外部容器的高度。 例如:$('window').scrollTop()獲取的就是當(dāng)前這個(gè)頁面超出窗口最上端的高度,scrollLeft與此同理2015-05-05jQuery 練習(xí)[二] jquery 對(duì)象選擇器(1)
根據(jù) id 選擇(通過 id 只能選擇一個(gè)對(duì)象), 如: $("#div2") ,jquery 對(duì)象選擇器是jquery的一個(gè)亮點(diǎn)。2010-05-05基于jQuery實(shí)現(xiàn)的美觀星級(jí)評(píng)論打分組件代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的美觀星級(jí)評(píng)論打分組件代碼,涉及jQuery回調(diào)函數(shù)及頁面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10基于jquery實(shí)現(xiàn)復(fù)選框全選,反選,全不選等功能
本文分享一段基于jQuery實(shí)現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼,有需要的小伙伴可以參考一下2015-10-10jquery.cookie.js 操作cookie實(shí)現(xiàn)記住密碼功能的實(shí)現(xiàn)代碼
jquery.cookie.js操作cookie實(shí)現(xiàn)記住密碼功能,很簡單很強(qiáng)大,喜歡的朋友可以參考下。2011-04-04