jquery - 警告框出现不止一次？

Question

html:

<div class="box">
   <div><p>Hello World</p></div>
</div>
<input type="button" id="add" value="Add" />

jQuery：

$(document).ready(function(){

  var count = 0;
  $("#add").click(function(){
    $(".box").append('<div id="'+count+'"><button type="button" class="close">&times;  </button></div>');
    count++;
    $(".close").click(function(){
    alert("hi");
    });
  });
});

当我单击添加时，按钮一个接一个地附加。当我单击 id = 0 的类关闭的第一个按钮时，会出现警告框，显示之前添加按钮的次数。

我的意思是，如果我附加 5 个按钮并且当我按下 close who (id = 0) 时，警报框会出现 5 次。

如果 id = 1 , 4 次
id = 2 , 3 次
id = 3 , 2 次
id = 4, 1 次

如果我将 JQuery 关闭单击功能放在 JQuery 添加功能之外，则根本不会出现警报框。

每当我按下任何关闭按钮时，如何让警报框只出现一次？

希望我以其他人可以理解的方式解释它，如果不是我很抱歉。任何帮助将不胜感激！

Answer 1

$(".box").on('click', '.close', function(){
   alert('hi');
});

绑定处理程序一次，而不是每次附加一个新按钮。
在处理程序中添加上述内容document.ready。

我正在演示一种将事件处理程序委托给祖先元素的方法，该元素在初始化时位于 DOM 中。

Answer 2

我认为您只需要取消绑定关闭，例如：

$('.close').unbind('click');

因此，在您的最终代码中，这对您来说应该可以正常工作：

$(document).ready(function(){

  var count = 0;
  $("#add").click(function(){
    $(".box").append('<div id="'+count+'"><button type="button" class="close">& times;  </button></div>);
    count++;
    $('.close').unbind('click'); //<-- This line here
    $(".close").click(function(){
    alert("hi");
    });
  });

});