0

現在、いくつかの Web 呼び出しに基づいてリストを動的に作成しています。これらの呼び出しが戻ってきたら、HTML テンプレートを使用して、呼び出し応答に基づいて別の項目をリストに追加します。また、jQuery を使用してこれらのオブジェクトにいくつかのイベントをアタッチしようとしていますが、アイテムを生成すると、最後に生成されたアイテムだけが適切なイベントを発しているように見えます。

コードは次のとおりです。

JavaScript は html 文字列を生成し、それをリストに追加します。

List.innerHTML += html;

html は moustache.js を使用して生成され、適切にレンダリングされます。追加する前にテンプレートに id を設定します。

テンプレートの形式は次のとおりです。

var template = '<li style="width:400px; height:100px" id="{{id}}"  ><img src="{{source}}" style="float:left"/>{{title}} <button id="{{id}}button">Delete</button></li>';

すべての要素が適切に置き換えられている場所。

次に、ボタンにクリック イベントをアタッチし、リスト オブジェクト全体にダブル クリック イベントをアタッチします。

$('#' +id +'button').bind('click', function() {
       //SOME STUFF GOES HERE
     });

$('#' +id +'button').bind('dblclick', function() {
     //MORE STUFF GOES HERE
     });

イベントが各オブジェクトにアタッチされない理由がわかりません。何か不足していますか?

ありがとう！

4

1 に答える 1

4

クリック ハンドラーを追加するまでに、ブラウザーで DOM が更新されていない可能性があります。いくつかのオプションがあります。

  1. 委任されたバインディングを使用する (.on を使用)
  2. イベントを DOM に追加する前に添付する

例 1:

$('body').on('click', '#' +id +'button', function () { /* foo */ });

例 2:

$('#' +id +'button', myHtml).on('click', function () { /* foo */ });
List.append(myHtml);
于 2012-07-06T18:56:16.860 に答える