javascript - jQuery Cantは、追加されたliを削除します

Question

新しい<li>ものをリストに追加してから削除しようとすると、新しく追加された機能をリストから削除できませんか？

http://jsfiddle.net/43nWM/

乾杯

Answer 1

あなたが試すことができます。

http://jsfiddle.net/43nWM/1/

    $(function(){
      $('#cblist a').live('click', function(){
        $(this).parent('li').remove();
        return false;
      });
    });

Answer 2

ここでの秘密はイベントの委任です。を呼び出す.click(function() {...})か、そのイベントハンドラーが、コードの実行時に.on('click', function() {...})セレクターと一致した要素にのみ割り当てられる場合。後で追加される要素には影響しません。

ただし、イベント委任を使用して、すべての動的要素を含む静的要素にイベントハンドラーを割り当てることができます。これにより、動的セレクターに一致する要素がそのタイプのイベントをトリガーするたびにコールバック関数が実行されます。

$('#cblist').on('click', 'a', function() {
    $(this).parent('li').remove();
    return false;
});

詳細については、関数のドキュメントの「直接イベントと委任イベント」というタイトルのセクションを参照し.on()てください。

Answer 3

$(function(){
     $('#cblist').on('click','a',function(){
         $(this).parent('li').remove();
         return false;
     });
});

このjsfiddleを表示

Answer 4

別のオプションは、次のように on() 関数を使用することです: http://jsfiddle.net/43nWM/12/

正直なところ、私は実際には他の 2 つのソリューションを好みます。

編集: 代わりに on() を使用してください。私はもともと live() の使用を提案しました

Answer 5

li動的タグに追加するには、このコードを追加する必要があります

$li = $('<li>'+name+'</li>');
$a = $('<a href="">remove</a>');
        $a.click(function(){
          $(this).parent('li').remove();
          return false;      
        });
$li.append($a);

私はjsfiddleのコードも更新しました

Answer 6

ブラウザが JavaScript コードを読み取っているときに、動的に追加された li が DOM にないため、見つけられません。代わりに、ハンドラーを親に追加し、次のように a をリッスンします。

$('#cblist').on('click', 'a', function(){
    $(this).parent('li').remove();
    return false;
});

フィドル: http://jsfiddle.net/43nWM/3/

Answer 7

クリックイベントを現在の「削除」リンクにのみバインドし、将来のリンクにはバインドしていません。これにはイベント委任を使用して、両方のベースをカバーします。変化する：

  $('#cblist a').click(function(){

に

  $('#cblist').on('click', 'a', function() {