jQuery解決添加元素后不執(zhí)行原有事件的方法
更新時間：2021年11月22日 15:44:57 作者：.余霞成綺
我們有時使用jQuery新加元素后，會出現新元素不會執(zhí)行一部分原有的事件函數。本文主要介紹了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í)行一部分原有的事件函數
博主是學生，也只是研究了一種方法：
$("#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來實現。js/jq動態(tài)添加的元素觸發(fā)綁定事件的解決方法
注意注意：如果頁面同時存在低版本的jq（1.3-1.8）和高版本jq（jquery1.9以上）的話，live委托事件會被高版本移除，最后導致雖然有jquery版本是在1.3-1.8之間，使用了live事件，頁面會報錯。
到此這篇關于jQuery解決添加元素后不執(zhí)行原有事件的方法的文章就介紹到這了,更多相關jQuery的內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇jquery實現聯想詞搜索框和搜索結果分頁的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了jQuery操作iframe中js函數的方法,結合實例形式總結分析了jQuery操作iframe中的元素、函數常用方法與注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2016-07-07
本文介紹一個treepanel動態(tài)加載數據的例子，需要了解的朋友可以參考下2012-12-12
在網上一直找不到jquery上傳圖片的例子,今天由于工作需要,在網上找了很長時間,找到了一個不太完整的例子,自已又對其進行了修改,現在已經可以使用,但只限于IE,火狐下不能使用,因為火狐下得不到本地上傳的圖片路徑,希望能對新手有所幫助.2010-01-01
這部分作為后臺的一部分實現，目的是實現某個指定目錄下所有文件夾和文件的瀏覽，同時不顯示不允許的格式，對于文本格式和代碼文件可以進行編輯2008-10-10
分享一個背景云變換js特效隨著鼠標的移動，背景云會不斷的變化位置和形狀,感興趣的朋友可以研究下2012-12-12
這篇文章主要介紹了jQuery檢測鼠標左鍵和右鍵點擊的方法,涉及jQuery操作鼠標事件的技巧,且針對IE瀏覽器具備良好的兼容性,需要的朋友可以參考下2015-03-03
這篇文章運用實例介紹了jQuery的無new構建，小編感覺介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學習吧。2016-08-08
淺析onsubmit校驗表單時利用ajax的return false無效問題
前幾天，在校驗一個表單數據用到ajax時，遇到 return false 無效問題,以下就是對這個問題進行了分析介紹，需要的朋友可以參考下2013-07-07
本篇文章主要對Jquery的事件操作和文檔操作進行實例的分享，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12