Question

我正在尝试触发子div事件，但似乎而不是子div，它是被触发的父div的click事件。我尝试在子事件中使用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委托事件方法{。}}。

使用

绑定事件

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

ppixregexplain.pl

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

2 个答案: