javascript - 如何在不触发父 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

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

截至目前，您正在为页面中不存在的 divlot 使用直接事件处理程序绑定(bind)，因此事件处理程序和 e.stopPropagation() 都不起作用/p>

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

使用绑定(bind)事件

$("#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>