1. 程式人生 > 程式設計 >jQuery解決新增元素後不執行原有事件的方法

jQuery解決新增元素後不執行原有事件的方法

我們先來看下我的錯誤程式碼

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>

$(".add").click(function(){
		var newYuansu = $("<tr><td><button class='del'>刪除</button></td></twww.cppcns.comr>");
		$(".last").before(newYuansu);
})
$(".del").click(function(){
        $(this).parents("tr").remove();
})

而此時使用新加元素,新元素元素不會執行一部分原有的事件函式

博主是學生,也只是研究了一種方法:

$("#best").on("click",".del",function(){
		$(this).parents("tr").remove();
})

把原本的click事件這樣寫,就可在新加的元素使用,非常好用~

補充:

一、jquery1.3版本以下的(不包括jquery1.3),是時候更新你的jquery版本了。

因為 無解無解無解無解無解無解

二、如果jquery版本是在1.3-1.8之間的話,js/jq動態新增的元素觸發繫結事件的解決方法(不建議用on事件,因為1.6版本以下不支援on事件,會報錯)

繫結live事件(live事件只在jquery1.9以下才支援,高版本不支援)。

$(".del").live("click",funcwww.cppcns.comtion(){ ///jquery 1.9(不包括1.9)以下可以

               alert('這裡是動態元素新增的事件');

           })

三、推薦使用on

如果jquery版本是在1.9或者更高的話,live委託事件是被移除的,通過on來實現。js/jq動態新增的元素觸發繫結事件的解決方法

注意注意:如果頁面同時存在低版本的jq(1.3-1.8)和高版本jq(jquery1.9以上)的話,live委託事件會被高版本移除,最後導致雖然有jquery版本是在1.3-1.8之間,使用了live事件,頁面會報錯。

到此這篇關於jQuery解決新增元素後不執行原有事件的方法的文章就介紹到這了,更多相關jQuery的內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!