如何在不触发父 div 事件的情况下触发子 div 事件？

Question

我正在尝试触发子 div 事件，但似乎触发的不是子 div ，而是父 div 的点击事件。我尝试在子事件中使用 stopPropagation，但它似乎不起作用。

$(document).ready(function() {
  var lot = '<div class="divlot">This is a lot!</div>'
  var lineitem = '<div class="divlineitem">This is a lineitem!</div>'

  $("#container").on("click", function() {

    $("#container").append(lot);
  });

  $(".divlot").on("click", function(e) {
    e.stopPropagation();
    alert($(this).attr("class"));
    $(this).append(lineitem);
  });


});

#container {
  background-color: grey;
}
.divlot {
  background-color: red;
  padding-left: 20px;
}
.divlineitem {
  background-color: blue;
  padding-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="container">Container</div>

Answer 1

事件处理程序仅绑定到当前选定的元素；它们必须在您的代码进行事件绑定调用时存在于页面上。

截至目前，您正在为 divlot 使用直接事件处理程序绑定，页面中不存在该事件处理程序，因此事件处理程序和 e.stopPropagation()

都不起作用

由于您是动态添加事件，因此您需要使用 Event Delegation using .on() 委托事件方法。

绑定事件使用

$("#container").on("click", ".divlot", function(e) {
    e.stopPropagation();
    alert($(this).attr("class"));
    $(this).append(lineitem);
});

$(document).ready(function() {
  var lot = '<div class="divlot">This is a lot!</div>'
  var lineitem = '<div class="divlineitem">This is a lineitem!</div>'

  $("#container").on("click", function() {

    $("#container").append(lot);
  });

  $("#container").on("click", ".divlot", function(e) {
    e.stopPropagation();
    alert($(this).attr("class"));
    $(this).append(lineitem);
  });


});

#container {
  background-color: grey;
}
.divlot {
  background-color: red;
  padding-left: 20px;
}
.divlineitem {
  background-color: blue;
  padding-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="container">Container</div>

Answer 2

您正在动态创建子 div。因此，您应该使用事件委托来正确绑定事件。

  $("#container").on("click",".divlot", function(e) {
    e.stopPropagation();
    alert($(this).attr("class"));
    $(this).append(lineitem);
  });

Fiddle

如何在不触发父 div 事件的情况下触发子 div 事件？

How to fire child div event without firing parent div event?

html

javascript

css

asp.net

jquery