JavaScript动态生成元素的事件绑定解决方案

原生JavaScript中的直接绑定限制

<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');//创建一个新的小li
  newLi.innerHTML='我是新建的li4';//修改新的小li的HTML中的内容
  div.appendChild(newLi);//把新的小li添加到div中
  //遍历所有li,为他们绑定点击事件
  li.forEach(function (el){
      el.addEventListener('click',function (){
          alert('我被点击了');
      })
  })
  var ul=document.querySelector('ul');
  ul.appendChild(li[2]);
</script>

调整代码顺序的局限性

 var div=document.querySelector('div');//获取div元素
  var newLi=document.createElement('li');//创建一个新的小li
  newLi.innerHTML='我是新建的li4';//修改新的小li的HTML中的内容
  div.appendChild(newLi);//把新的小li添加到div中
  var li=document.querySelectorAll('li');//获取所有li元素，包括新建的li元素

基于事件冒泡的委托方案

 var li=document.querySelectorAll('li');//获取所有li元素，包括新建的li元素
  var li=document.querySelectorAll('li');//获取所有的li元素
  var div=document.querySelector('div');//获取div元素
  var newLi=document.createElement('li');//创建一个新的小li
  newLi.innerHTML='我是新建的li4';//修改新的小li的HTML中的内容
    div.addEventListener('click',function (e){
        console.log(e.target);
    })
  div.appendChild(newLi);//把新的小li添加到div中

jQuery实现动态事件绑定的方法

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

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