欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決jQuery ajax動(dòng)態(tài)新增節(jié)點(diǎn)無(wú)法觸發(fā)點(diǎn)擊事件的問(wèn)題

 更新時(shí)間：2017年05月24日 14:15:55   作者：fogwu  
在寫ajax加載數(shù)據(jù)的時(shí)候發(fā)現(xiàn)，后面添加進(jìn)來(lái)的demo節(jié)點(diǎn)元素，失去了之前的點(diǎn)擊事件，如何解決此問(wèn)題呢？下面小編給大家?guī)?lái)了jQuery ajax動(dòng)態(tài)新增節(jié)點(diǎn)無(wú)法觸發(fā)點(diǎn)擊事件的解決方法，一起看看吧

在寫ajax加載數(shù)據(jù)的時(shí)候發(fā)現(xiàn)，后面添加進(jìn)來(lái)的demo節(jié)點(diǎn)元素，失去了之前的點(diǎn)擊事件。為什么點(diǎn)擊事件失效，我們?cè)撛趺慈ソ鉀Q呢?

其實(shí)最簡(jiǎn)單的方法就是直接在標(biāo)簽中寫onclick=""，但是這樣寫其實(shí)是有點(diǎn)low的，最好的方式還是通過(guò)給類名綁定一個(gè)click事件。

解決jQuery ajax動(dòng)態(tài)新增節(jié)點(diǎn)無(wú)法觸發(fā)事件問(wèn)題的兩種解決方法，為了達(dá)到更好的演示效果，假設(shè)在某個(gè)頁(yè)面的body下有以下結(jié)構(gòu)的代碼：

 <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>'); //動(dòng)態(tài)像ul的末尾追加一個(gè)新元素
 });
 </script>

方法一：使用live：

live()函數(shù)會(huì)給被選的元素綁定上一個(gè)或者多個(gè)事件處理程序，并且規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。通過(guò)live()函數(shù)適用于匹配選擇器的當(dāng)前及未來(lái)的元素。比如，通過(guò)腳本動(dòng)態(tài)創(chuàng)建的元素。

實(shí)現(xiàn)如下：

$('.demo1').live('click', function(){
 alert('OK');
});

方法二：使用on：

可以通過(guò)on方法綁定事件，可以綁定到它的父級(jí)或者body中，實(shí)現(xiàn)如下：

$("#demo").on('click','.demol',function(){
 alert('OK')
});

通過(guò)上面的兩種方法，都可以解決jQuery ajax動(dòng)態(tài)新增節(jié)點(diǎn)無(wú)法觸發(fā)點(diǎn)擊事件的問(wèn)題。知道方法了，趕緊的試試吧。

以上所述是小編給大家介紹的解決jQuery ajax動(dòng)態(tài)新增節(jié)點(diǎn)無(wú)法觸發(fā)點(diǎn)擊事件的問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論