不知道大家在寫(xiě)js的時(shí)候碰沒(méi)碰到過(guò)這樣一個(gè)問(wèn)題：算了，還是直接上代碼

就是有時(shí)我們使用querySelectAll(‘li’)只能獲取html原有的li1,li2,li3標(biāo)簽，如果我們此時(shí)創(chuàng)建一個(gè)新的小li名為newLi并把它添加到div里面,querySelectAll(‘li’）就無(wú)法選取newLi。

<div>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</div>
<ul>
</ul>
<!--為一個(gè)元素添加事件，那么這個(gè)元素不論移到那里，不能是否綁定他，那么這個(gè)元素都將擁有這個(gè)事件-->
<script>
  var li=document.querySelectorAll('li');//獲取所有的li元素
  var div=document.querySelector('div');//獲取div元素
  var newLi=document.createElement('li');//創(chuàng)建一個(gè)新的小li
  newLi.innerHTML='我是新建的li4';//修改新的小li的HTML中的內(nèi)容
  div.appendChild(newLi);//把新的小li添加到div中
  //遍歷所有l(wèi)i,為他們綁定點(diǎn)擊事件
  li.forEach(function (el){
      el.addEventListener('click',function (){
          alert('我被點(diǎn)擊了');
      })
  })
  var ul=document.querySelector('ul');
  ul.appendChild(li[2]);
</script>

因?yàn)?var li=document.querySelectorAll(‘li’); 把他放在第一行只能獲取前三個(gè)，因?yàn)樾碌?小li還沒(méi)有創(chuàng)建出來(lái)。

此時(shí)把 var li=document.querySelectorAll(‘li’);//獲取所有的li元素 放在添加新元素的后面就可以選取新建元素。

 var div=document.querySelector('div');//獲取div元素
  var newLi=document.createElement('li');//創(chuàng)建一個(gè)新的小li
  newLi.innerHTML='我是新建的li4';//修改新的小li的HTML中的內(nèi)容
  div.appendChild(newLi);//把新的小li添加到div中
  var li=document.querySelectorAll('li');//獲取所有l(wèi)i元素，包括新建的li元素

上面的代碼是用原生的Javascript生成的，當(dāng)此代碼執(zhí)行時(shí)，js會(huì)在頁(yè)面中生成第四個(gè)li標(biāo)簽，且點(diǎn)擊這四個(gè)標(biāo)簽的時(shí)候，都會(huì)觸發(fā)相應(yīng)的動(dòng) 作。那么是不是就是說(shuō)，用js生成的HTML內(nèi)容，都可以被綁定相應(yīng)的事件呢？答案是否定的，在上面代碼的script標(biāo)簽中，有兩個(gè)代碼段，代碼段一是 用來(lái)向HTML中插入內(nèi)容的，代碼段二是用來(lái)綁定事件的，如果把代碼段一和代碼段二互換位置，發(fā)現(xiàn)JS生成的第四個(gè)li標(biāo)簽沒(méi)有綁定上click事件

發(fā)現(xiàn)結(jié)果也一樣，事件執(zhí)行成功與否也代碼段的順序有直接的關(guān)系。

其實(shí)原來(lái)很好分析，無(wú)論是利用getElementsByTagName還是jquery的選擇器，當(dāng)需要的內(nèi)容還沒(méi)有被插入時(shí)，選擇器只會(huì)選擇頁(yè)面中已經(jīng)存在的元素，所以事先沒(méi)有存在元素是綁定不了事件的。

但是，實(shí)際情況是，工作中有可能需要把后來(lái)生成的元素綁定上事件，并注冊(cè)上事件處理函數(shù)。

可以這樣理解，無(wú)論HTML內(nèi)容是不是JS生成的，只要沒(méi)有跨域，所有頁(yè)面內(nèi)的元素都屬于這個(gè)頁(yè)面，都能夠綁定事件，JS中有個(gè)非常重要的概念叫事件冒泡，簡(jiǎn)單來(lái)講，就是子元素產(chǎn)生的事件，會(huì)一直冒泡到最頂級(jí)父元素，并能夠被父元素監(jiān)測(cè)到。

那么，我能不能在被插入元素的父元素上監(jiān)測(cè)冒泡產(chǎn)生的事件，并回調(diào)相應(yīng)的函數(shù)呢？答案是當(dāng)然是肯定的。

注意此時(shí)點(diǎn)擊事件是在添加元素的前面，通過(guò)事件委托的方式，我們可以實(shí)現(xiàn)為新建元素添加綁定事件

 var li=document.querySelectorAll('li');//獲取所有l(wèi)i元素，包括新建的li元素
  var li=document.querySelectorAll('li');//獲取所有的li元素
  var div=document.querySelector('div');//獲取div元素
  var newLi=document.createElement('li');//創(chuàng)建一個(gè)新的小li
  newLi.innerHTML='我是新建的li4';//修改新的小li的HTML中的內(nèi)容
    div.addEventListener('click',function (e){
        console.log(e.target);
    })
  div.appendChild(newLi);//把新的小li添加到div中

我們也可以使用jquery的on()方法實(shí)現(xiàn)，來(lái)看下面的例子，注意點(diǎn)擊事件是在創(chuàng)建li標(biāo)簽的后面。

為ul添加點(diǎn)擊事件，但觸發(fā)事件的是ul里面的li的元素

 $('ul').on('click','li',function (){
      alert('我是新建li')
  });
  $('ul').append("<li></li>");

使用delegatef方法也可以實(shí)現(xiàn)

 $(".createDiv").delegate('agin', 'clik', function () { 
　　　　　　　　alert(‘我是新建小li');
  });

總結(jié)

到此這篇關(guān)于js為新添加元素添加綁定事件的文章就介紹到這了,更多相關(guān)js新添加元素添加綁定事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論