jqueryクリックイベントパズル

Question

これは詳細情報を含む繰り返し投稿です...

一連のタグを動的に作成し、それらに追加してクリックハンドラーを追加します...

$(document).ready(function(){
    // ... code to append <a> tags to nav div        
    $("#nav a").click(function(event){ 
       alert('Clicked '+event.target.id);
       return false;
    });
});

この結果として10個のタグがあり、最初のタグをクリックすると、10（TEN！）のアラートが表示されますが、実際にクリックしたタグのIDがすべて表示されます。

（5番目のタグをクリックすると、うん、5つのアラートが表示されます-すべて5番目のタグのIDで...）

ここで何が起こっているのですか？タグを動的に作成したからですか？それを回避する方法はありますか？

aタグを作成するコードは次のとおりです

$(document).ready(function(){
  $.get('_7day-M2.5.xml', {}, function(xml){
    $(xml).find('entry').each(function(i){
      $('#nav').append('<a href="#" id="'+i+'">'+$(this).find("title").text()+"</a><br/>");
    });
  });
});

Firebugの出力では、見た目が奇妙なものは何もありません。

ここで何が起こっているのか考えていますか？

ありがとう

Answer 1

セレクターとして$（＆quot; #nav a＆quot;）の代わりに$（＆quot; #nav＆gt; a＆quot;）を使用してみてください。それでもうまくいかない場合は、ループの外側でクリックイベントをバインドしていることを確認してください。たとえば、アンカータグを作成するときに持っている$ .each（）内にクリックイベントバインディングがある場合、複数のクリックイベントを作成します。