Question

我有一个名为appendDiv的div，当我点击它时，会附加一个类名为textGroup的div。

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

    $('#appendDiv').append("<label class='textGroup' style='width:50px;height:50px;background-color:gray;z-index:4;position:absolute;top:" + e.pageY + "px;left:" + e.pageX + "px;'></label>")

});

我点击textGroup div的点击功能（即），点击它时会发出警报。但是当我单击textGroup div时，警报即将到来，并附加一个div。这是函数

$("#appendDiv").on("click", function(e) {
   $('#appendDiv').append("<label class='textGroup' style='width:50px;height:50px;background-color:gray;z-index:4;position:absolute;top:" + e.pageY + "px;left:" + e.pageX + "px;'></label>")

   $(".textGroup").bind("click", function() {
      alert("appended");
   });
});

我知道textGroup是appendDiv的孩子。但是，我的问题是

我点击了textGroup div，但为什么会执行appendDiv的点击功能？
如何仅在点击appendDiv时限制appendDiv的点击功能，而不是点击textGroup？

这是jsFiddle link

Answer 1

您的代码中有2个问题

1）元素上的多事件绑定。

2）事件传播到子点击元素

修改单击处理程序以将事件附加到上一个附加元素以及从父元素停止事件传播：

$("#appendDiv .textGroup:last").click( function(e) {
  e.stopPropagation();
  alert("hi")
});

<强> Working Demo

Answer 2

您可以执行以下2项更改：

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

 $('#appendDiv').append("<label class='textGroup' style='width:50px;height:50px;background-color:gray;z-index:4;position:absolute;top:" + e.pageY + "px;left:" + e.pageX + "px;'></label>")

   // remove .textGroup click event from here
});

为textGroup创建新事件

$(document).on("click",".textGroup", function() {
      alert("appended");
});

Answer 3

事件通常会冒出DOM树（标签位于#appenDiv内部，因此是“父”，也会获得点击事件）。要停止使用：

$(".textGroup").on("click", function(event){
  event.stopPropagation();
  alert("hi");
});

Answer 4

试试这个：

使用带链接的on（）更好的方法，

 $("#appendDiv").on('click',function(e){
        $('#appendDiv').append("<label class='textGroup' style='width:50px;height:50px;background-color:gray;z-index:4;position:absolute;top:" + e.pageY + "px;left:" + e.pageX + "px;'></label>")
 }).on('click','.textGroup',function(e) {
        e.stopPropagation();
        alert("appended");
 });

Answer 5

这种情况是由于事件冒泡导致父事件在child和then child事件触发之前触发。您可以将 event.stopPropagation（）与子事件一起使用。将解决您的问题。

单击不同的div时，单击功能正在工作

5 个答案: