1

これがJSfiddleです

ここに私のコードがあります。

HTML

<h2>Todo List</h2>
<div id='additem'>
    <input type='text' name='additem'/>
    <button>Add Item</button>
</div>
<div id='todolist'>
    <ol>
    </ol>
   <!-- Add item from "additem" input field -->
</div>

JS

$(document).ready(function(){
    $('button').click(function(){
        var item = $('input[name=additem]').val();
        $('ol').append('<li>'+ item +' <button id="remove">Remove</button></li>');
    });
    $("#remove").click(function(){
       $(this).parent('li').remove();
    });

   });
4

5 に答える 5

4

イベント委任を使用して動的に追加された要素にはon()を使用する必要があります。on を使用してイベントをバインドするときに使用できる親要素にイベントを委任するか、それ以外の方法で使用できdocumentます。

$(document).on("click", "#remove", function(){
   $(this).parent('li').remove();
});

委任されたイベント

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナ要素になる可能性があります。参照

于 2013-05-08T18:51:07.870 に答える
1

live() は jQuery 1.9 以降削除されており、jsfiddle で jQuery 2.0 を使用しているため、簡単な答えは、他の人が指摘した ように on()を使用することです。http://jquery.com/upgrade-guide/1.9/#live-removed

これらの多くが存在する可能性があるため、「削除」ボタンの id をクラスに変更することもできます。また、parent() を closest() に変更して、マークアップがわずかに変更された場合でもコードが機能するようにします。

http://jsfiddle.net/rfK5a/10/

$(document).ready(function(){
  $('button').click(function(){
    var item = $('input[name=additem]').val();
    $('ol').append('<li>'+ item +' <button class="remove-btn">Remove</button></li>');
  });
  $('#todolist').on('click', '.remove-btn', function(e) {
    $(this).closest('li').remove();
  });
});
于 2013-05-08T19:09:08.510 に答える
1

ここはhttp://jsfiddle.net/rfK5a/7/です

以下のコードが必要です

$(document).ready(function(){
    $('button').click(function(){
        var item = $('input[name=additem]').val();
        $('ol').append('<li>'+ item +' <button class="remove">Remove</button></li>');
    });
    $("#todolist").on("click",".remove",function(){
       $(this).parent('li').remove();
    });

   });

remove class複数の削除ボタンがあるため、削除 ID の代わりに使用することをお勧めします。理想的には、1 つの ID を持つ複数の要素を持つべきではありません。

于 2013-05-08T19:01:07.507 に答える