如何强制先调用动态添加的元素 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();
});

当我点击锚 addEvent() 时先调用 editEvent()，但我希望当我点击 div 时应该调用 addEvent()，然后当我点击锚时 editEvent.

我知道冒泡，所以我引入了一个内部静态 div 来绑定侦听器，但仍然 addEvent() 先调用。我无法弄清楚如何强制先调用 editEvent。

Answer 1

e.stopPropagation();

使用这个。
如果你想阅读更多关于 .stopPropagation() 的内容，look here.

Answer 2

您同时使用了内联事件集 ( 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 避免将事件传播到上层元素。

Answer 3

如果您不想更改代码，也可以使用它。

$(function(){

$("#outerDiv").on("click",function(e){

  addEvent();

}); 

$("#outerDiv").on("click",".editEV",function(e){

  editEvent();
  e.stopPropagation();

});

});

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

How can I force to call dynamically added element,s onclick() first

javascript

jquery

event-bubbling