0

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でクラスcloseの最初のボタンをクリックすると、ボタンが以前に追加された回数だけアラートボックスが表示されます。

つまり、5つのボタンを追加し、その（id = 0）を閉じると、アラートボックスが5回表示されます。

id = 1の場合、
id = 2の4倍、
id = 3の3倍、id = 4の2倍
、1回

JQueryのクローズクリック関数をJQueryの追加関数の外に置くと、アラートボックスがまったく表示されません。

閉じるボタンを押すたびにアラートボックスを1回だけ表示するにはどうすればよいですか？

申し訳ありませんが、他の人が理解できる方法で説明したことを願っています。どんな助けでもありがたいです！

4

2 に答える 2

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

新しいボタンを追加するたびにではなく、ハンドラーを1回バインドします。上記をハンドラー
内に追加します。document.ready

初期化時にDOMにある祖先要素にイベントハンドラーを委任する方法を示しています。

于 2012-11-20T01:10:14.767 に答える
1

たとえば、クローズのバインドを解除する必要があると思います。

$('.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");
    });
  });

}）;

于 2012-11-20T01:10:41.613 に答える