您好,登錄后才能下訂單哦!
在寫ajax加載數據的時候發現,后面添加進來的demo節點元素,失去了之前的點擊事件。為什么點擊事件失效,我們該怎么去解決呢?
其實最簡單的方法就是直接在標簽中寫onclick="",但是這樣寫其實是有點low的,最好的方式還是通過給類名綁定一個click事件。
解決jQuery ajax動態新增節點無法觸發事件問題的兩種解決方法,為了達到更好的演示效果,假設在某個頁面的body下有以下結構的代碼:
<ul id="demo"> <li class="demo1">a1</li> <li class="demo1">a2</li> <li class="demo1">a3</li> </ul> <script type="text/javascript"> $("#demo").click(function(){ $("#demo").append('<li class="demo1">aaa4</li>'); //動態像ul的末尾追加一個新元素 }); </script>
方法一:使用live:
live()函數會給被選的元素綁定上一個或者多個事件處理程序,并且規定當這些事件發生時運行的函數。通過live()函數適用于匹配選擇器的當前及未來的元素。比如,通過腳本動態創建的元素。
實現如下:
$('.demo1').live('click', function(){ alert('OK'); });
方法二:使用on:
可以通過on方法綁定事件,可以綁定到它的父級或者body中,實現如下:
$("#demo").on('click','.demol',function(){ alert('OK') });
通過上面的兩種方法,都可以解決jQuery ajax動態新增節點無法觸發點擊事件的問題。知道方法了,趕緊的試試吧。
以上所述是小編給大家介紹的解決jQuery ajax動態新增節點無法觸發點擊事件的問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。