利用事件委托解决js元素添加后未响应绑定事件问题

最新推荐文章于 2022-02-05 18:25:48 发布

原创最新推荐文章于 2022-02-05 18:25:48 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

55 篇文章

订阅专栏

本文通过一个具体的案例探讨了如何使用事件委托解决动态添加元素时的事件绑定问题。介绍了使用JavaScript为父元素绑定事件监听器的方法，使得即使子元素是在运行时动态添加的也能响应事件。

1.情景还原

html

<ul id="Container">
  <li class='divclick'><span><em>1</em></span></li>
  <li class='divclick'><span><em>2</em></span></li>
  <li class='divclick'><span><em>3</em></span></li>
</ul>
<button id="add">添加</button>

$(".divclick").click(function(){
    console.log(2);
})
$("#add").click(function(){
    htmlstr="<li class='divclick'><span><em>4</em></span></li>"      
    $('#Container').append(htmlstr);
})

*在button添加第四个li元素之后，之前绑定的事件没有执行。

*利用事件委托，将事件绑定在父元素上

$("#Container").click(function(ev){
    　var ev = ev || window.event;
      var target = ev.target || ev.srcElement;
      console.log(2);
      if (target.nodeName.toLowerCase() == 'em') {
           var index=$(target).parents('li').index();
           console.log(index);
      }
})
$("#add").click(function(){
    htmlstr="<li class='divclick'><span><em>4</em></span></li>"      
    $('#Container').append(htmlstr);
})