不知道大家在寫js的時候碰沒碰到過這樣一個問題：算了，還是直接上代碼

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

<div>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</div>
<ul>
</ul>
<!--為一個元素添加事件，那么這個元素不論移到那里，不能是否綁定他，那么這個元素都將擁有這個事件-->
<script>
  var li=document.querySelectorAll('li');//獲取所有的li元素
  var div=document.querySelector('div');//獲取div元素
  var newLi=document.createElement('li');//創(chuàng)建一個新的小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’); 把他放在第一行只能獲取前三個，因?yàn)樾碌?小li還沒有創(chuàng)建出來。

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

 var div=document.querySelector('div');//獲取div元素
  var newLi=document.createElement('li');//創(chuàng)建一個新的小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í)行時，js會在頁面中生成第四個li標(biāo)簽，且點(diǎn)擊這四個標(biāo)簽的時候，都會觸發(fā)相應(yīng)的動 作。那么是不是就是說，用js生成的HTML內(nèi)容，都可以被綁定相應(yīng)的事件呢？答案是否定的，在上面代碼的script標(biāo)簽中，有兩個代碼段，代碼段一是 用來向HTML中插入內(nèi)容的，代碼段二是用來綁定事件的，如果把代碼段一和代碼段二互換位置，發(fā)現(xiàn)JS生成的第四個li標(biāo)簽沒有綁定上click事件

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

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

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

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

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

注意此時點(diǎn)擊事件是在添加元素的前面，通過事件委托的方式，我們可以實(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)建一個新的小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)，來看下面的例子，注意點(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論