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关闭点击功能放在JQuery add函数之外，那么警报框就不会出现了。

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

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

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

}）;

警示框出现不止一次？

2 个答案: