JQueryは作成された要素を認識しません

Question

jqueryでフォームの変更によって作成された要素を認識できない場合があります。私はそれを設定しているので、何かを選択するとリンクが作成されますが、作成されたアイテムにクリック機能を追加すると何も起こりません。どのように私はこの作品を作ることができますか？

$(function() { 

var i = $('#nav li').size() + 1; 

$('a#add').click(function() { 
    $('<li>' + i + '<a href="#" id="add">yes</a></li>').appendTo('ul'); 
    i++; 
}); 

$('a#remove').click(function() { 
    $('li:last').remove(); 
    i--; 
}); 


}); 

htmlコード

<ul id="nav"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
<a href="#" id="add">Add List Item</a><br/> 
<a href="#" id="remove">Remove LI</a> 

Answer 1

ダイナミックに作成された要素のイベントハンドラをバインドするには、ライブを使用する必要があります。 あなたの現在のコードは、有効でない同じidを持つ複数のhtml要素を作成します。 代わりにクラス名を使用して、src要素を識別できます。

これを試してみてください：

$(function() { 
    var i = $('#nav li').size() + 1; 
    $('a.add').live("click", function() { 
     $('<li>' + i + '<a href="#" class="add">yes</a></li>').appendTo('ul'); 
     i++; 
    }); 

    $('a.remove').live("click", function() { 
     $('li:last').remove(); 
     i--; 
    }); 
}); 

HTMLコードセレクタにイベントをアタッチするとjQueryで作成された他のすべては、あなたが代わりに.live（）関数を使用する必要があり

<ul id="nav"> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
</ul> 
<a href="#" class="add">Add List Item</a><br/> 
<a href="#" class="remove">Remove LI</a> 

Answer 2

変更これまであなたのjqueryの：

$(function() { 
    var i = $('#nav li').size() + 1; 

    $('a#add').live('click', function() { 
     $('<li>' + i + '<a href="#" id="add">yes</a></li>').appendTo('ul'); 
     i++; 
    }); 

    $('a#remove').live('click', function() { 
     $('li:last').remove(); 
     i--; 
    }); 
}); 

Answer 3

はあなたがここに.clickを使用することはできません。 .clickはマウスイベントアクションで.bindだけです。 .live

Answer 4

。クリック（）略語。

あなたのコードは、あなたに「クリック」イベントをアタッチするために「＃の追加」リンクは次のようになります。

$('a#add').live('click', function() { 
    $('<li>' + i + '<a href="#" id="add">yes</a></li>').appendTo('ul'); 
    i++; 
}); 

Answer 5

id="add"は1ページあたり一つの要素で許可されています。複数回使用すると、奇妙なことが起こる可能性があります。コードを次のように変更してください：

$(function() { 
    var i = $('#nav li').size() + 1; 

    $('a#add').click(function() { 
     $('<li>' + i + '<a href="#" class="add">yes</a></li>').appendTo('ul'); 
     i++; 
    }); 

    $('ul a.add').live('click', function() { 
     // handle any link with class "add" that was dynamically added to the ul 
    }); 

    $('a#remove').live('click', function() { 
     $('li:last').remove(); 
     i--; 
    }); 
});