javascript - 单击不同div时单击功能起作用

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 的子级。但是，我的问题是

1. 我点击的是textGroup div，但是为什么执行了appendDiv的点击函数？

2. 如何限制appendDiv的点击功能只有在点击appendDiv时才起作用，而不是在点击textGroup时起作用？

这是jsFiddle link

Answer 1

您的代码中有 2 个问题

1) 元素上的多个事件绑定(bind)。

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

修改点击处理程序以将事件附加到最后一个附加元素，同时停止从父元素传播事件:

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

<强> Working Demo