如何防止javascript冒泡答案

【问题标题】：How to prevent javascript bubbling如何防止javascript冒泡
【发布时间】：2015-06-05 09:30:43
【问题描述】：

我说的是 Jquery。说，我有一个按钮，我单击它并动态创建一个新的 div。我再次单击并创建了另一个 div。这样我创建了 3 个 div。

每个新创建的div也动态创建一个按钮，点击我要获取alert('something')

问题是，当我单击第一个 div（新创建的 div）的按钮时，我收到了 3 次警报，当我单击第二个 div（新创建的 div）的按钮时，我收到了警报 2次。对于每一次点击，我希望只收到一次提醒。但我正面临 Javascript 冒泡*

我的 Javascript 和 HTML 代码：

$("#btn11").click(function(){
    var nw="<div class='product_input'><input type='text'/><br/>";
    nw+="<button type='button' class='btn12'>Add category</button>";
    nw+="</div>";
    $("#apnd1").append(nw);

    $(".btn12").click(function(){
      alert("jhfj");
    });
  });

<div id="apnd1"></div>
<button type="button" id="btn11">Add product</button>

如何摆脱这个？

【问题讨论】：

不要每次都绑定...
我应该取消绑定第一次点击事件吗？怎么样？
restrict event propagation in javascript的可能重复
@David，我搜索了类似的问题，但没有得到，所以问

标签： javascript jquery html

【解决方案1】：

不要将事件绑定到另一个事件中。你可以把它绑定在外面。由于它是动态创建的，因此您需要使用委托来绑定事件。那么您将不会收到多个警报

$("#btn11").click(function() {
    var nw = "<div class='product_input'><input type='text'/><br/>";
    nw += "<button type='button' class='btn12'>Add category</button>";
    nw += "</div>";
    $("#apnd1").append(nw);
});
$("#apnd1").on("click", ".btn12", function() {
    alert("jhfj");
});

Fiddle

【讨论】：

投票赞成阅读了问题并定义了正确的选择器 ("#apnd1")。

【解决方案2】：

同样使用event delegation，Demo

$(document).ready(function(){
        $("#btn11").click(function(){
            var nw="<div class='product_input'><input type='text'/><br/>";
            nw+="<button type='button' class='btn12'>Add category</button>";
            nw+="</div>";
            $("#apnd1").append(nw);            
        });
    $(document).on('click', ".btn12", function(){
                alert("jhfj");
            });
});

【讨论】：