警示框出现不止一次？

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(id = 0)时,警告框出现5次.

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

如果我在JQuery add函数之外放置JQuery close click函数,那么警报框根本不会出现.

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

希望我以别人能理解的方式解释它,如果不是我很抱歉.任何帮助将不胜感激!

Answer 1

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

将处理程序绑定一次,而不是每次添加新按钮.
在document.ready处理程序中添加以上内容.

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