jQuery解決添加元素后不執(zhí)行原有事件的方法
我們先來看下我的錯誤代碼
html:
<table border="1" id="best"> <tr> <td> <button class="change">修改</button> </td> </tr> <tr> <td> <button class="del">刪除</button> </td> </tr> <tr class="last"><td><button class="add">添加</button></td></tr> </table>
js:
$(".add").click(function(){ var newYuansu = $("<tr><td><button class='del'>刪除</button></td></tr>"); $(".last").before(newYuansu); }) $(".del").click(function(){ $(this).parents("tr").remove(); })
而此時使用jQuery新加元素,新元素元素不會執(zhí)行一部分原有的事件函數(shù)
博主是學生,也只是研究了一種方法:
$("#best").on("click",".del",function(){ $(this).parents("tr").remove(); })
把原本的click事件這樣寫,就可在新加的元素使用,非常好用~
補充:
一、jquery1.3版本以下的(不包括jquery1.3),是時候更新你的jquery版本了。
因為 無解無解無解無解無解無解
二、如果jquery版本是在1.3-1.8之間的話,js/jq動態(tài)添加的元素觸發(fā)綁定事件的解決方法(不建議用on事件,因為1.6版本以下不支持on事件,會報錯)
綁定live事件(live事件只在jquery1.9以下才支持,高版本不支持)。
$(".del").live("click",function(){ ///jquery 1.9(不包括1.9)以下可以 alert('這里是動態(tài)元素添加的事件'); })
三、推薦使用on
如果jquery版本是在1.9或者更高的話,live委托事件是被移除的,通過on來實現(xiàn)。js/jq動態(tài)添加的元素觸發(fā)綁定事件的解決方法
注意注意:如果頁面同時存在低版本的jq(1.3-1.8)和高版本jq(jquery1.9以上)的話,live委托事件會被高版本移除,最后導致雖然有jquery版本是在1.3-1.8之間,使用了live事件,頁面會報錯。
到此這篇關于jQuery解決添加元素后不執(zhí)行原有事件的方法的文章就介紹到這了,更多相關jQuery的內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
jquery實現(xiàn)聯(lián)想詞搜索框和搜索結(jié)果分頁的示例
今天小編就為大家分享一篇jquery實現(xiàn)聯(lián)想詞搜索框和搜索結(jié)果分頁的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10jQuery操作iframe中js函數(shù)的方法小結(jié)
這篇文章主要介紹了jQuery操作iframe中js函數(shù)的方法,結(jié)合實例形式總結(jié)分析了jQuery操作iframe中的元素、函數(shù)常用方法與注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2016-07-07treepanel動態(tài)加載數(shù)據(jù)實現(xiàn)代碼
本文介紹一個treepanel動態(tài)加載數(shù)據(jù)的例子,需要了解的朋友可以參考下2012-12-12淺析onsubmit校驗表單時利用ajax的return false無效問題
前幾天,在校驗一個表單數(shù)據(jù)用到ajax時,遇到 return false 無效問題,以下就是對這個問題進行了分析介紹,需要的朋友可以參考下2013-07-07