Question

我在谈论Jquery。说，我有一个按钮，我点击它，动态创建一个新的div。我再次点击，另一个div被创建。这样我创建了3个div。

每个新创建的div也动态创建一个按钮，点击我想要提醒的（'某事'）

问题是，当我点击第1个div（新创建的div）的按钮时，我得到警报3次，当我点击第2个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>

如何摆脱这个？

Answer 1

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

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

Answer 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");
            });
});

如何防止javascript冒泡

2 个答案: