javascript - 如何强制先调用动态添加的元素 click()

Question

<div id="outerDiv" onclick="javascript:addEvent()">
    <div id="inner">
        <a class='editEV' href="javascript:void(0)">event1</a>//*added dynamically from addEvent method.*
    </div>
 </div>

我的脚本是:

$('#inner').on('click','.editEV',function(){
    editEvent();
});

当我点击 anchor addEvent() 时首先调用 editEvent()，但我希望当我点击 div 时应该调用 addEvent() 并且当我单击 anchor ，然后单击 editEvent。

我知道冒泡，所以我引入了一个内部静态 div 来绑定(bind)监听器，但仍然首先调用 addEvent()。我不知道如何强制先调用 editEvent。

Answer 1

您正在同时使用 - 内联事件集 ( onclick=.. ) 和 Jquery on。选择其中之一，代码更清晰。我会选择 jquery on，这个问题的解决方案是创建两个事件 - 一个在 div 上，第二个在编辑元素上，但第二个我们需要使用 e.stopPropagation< 停止冒泡 方法。这里是完整的工作示例:

$(function(){

  $("#outerDiv").on("click",function(e){
  
      console.log("Add click");

  }); 
  
  $("#outerDiv").on("click",".editEV",function(e){
  
      console.log("Edit click");
      e.stopPropagation();//very important to stop propagate event

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerDiv" style="padding:20px; background:grey;">
    <div id="inner">
        <a class='editEV' >event1</a>
    </div>
 </div>

如果没有 stopPropagation，我们的事件将上升到 div 并运行它的事件，stopPropagation 避免将事件传播到上层元素。