0

私の問題は言葉では言い表せません。だから私は私の問題のjsfiddle.netを作成しました。

divのリストがあります。各divの中には、テキストと「X」があります。「X」は親divを削除することです。3つのdivと「X」は正常に機能します。しかし、新しいdivをリストに追加するボタンを追加した場合、それらの「X」は機能しません。この問題が何であるかについて何か考えはありますか？これはおそらく基本的なJSDOMのことだと思います。しかし、私は自分で考えており、この問題を解決するためのJSをよく理解していません。

どうぞよろしくお願いいたします。

http://jsfiddle.net/JLxKJ/

$("#trigger").click(function() {
    $("#participants_wrapper").append("<div class='participant'><a href='javascript:void(0)' class='delete_participant'>X</a>Appended</div>");
    return false;
});
$(".delete_participant").click(function(){
    $(this).closest('div').remove();
});
<div id="participants_wrapper">
  <div class="participant"><a href="javascript:void(0)" class="delete_participant">X</a>already here</div>
  <div class="participant"><a href="javascript:void(0)" class="delete_participant">X</a>already here</div>
  <div class="participant"><a href="javascript:void(0)" class="delete_participant">X</a>already here</div>
</div>
<a href="javascript:void(0)" id="trigger">add this participant</a>
4

3 に答える 3

2

dom内の最も近い既存の親にイベントを委任する必要があります。

$("#participants_wrapper").on("click", ".delete_participant", function(){
    $(this).closest('div').remove();
});

これは、ページの読み込み時にクリックイベントが存在しないため、jQueryが要素にクリックイベントを配置できないためです。これにより、イベントは親に配置されますが、子には影響します。

于 2013-02-07T18:00:45.973 に答える
0

イベントを新しい要素に再度バインドしないためです。

on（）を使用してそれを回避できます。

$("#participants_wrapper").on("click", ".delete_participant", 
    function(){
        $(this).closest('div').remove();
    }
);
于 2013-02-07T18:01:28.643 に答える
0

動的に追加される要素の場合は、jQueryの.on（）関数を使用します。削除コードを次のように変更します。

$("#participants_wrapper").on('click', '.delete_participant', function () {
    $(this).closest('div').remove();
});

jsFiddleの例

于 2013-02-07T18:02:26.767 に答える