クリック機能をDOM要素に動的に追加する

Question

私のテストコードでは、div要素を5ループ作成するためのコンテナとして使用している単純なdivがあります。私は5つのdiv要素すべてにクリック機能を追加しようとしますが、最後のものだけがクリック機能を与えられます。

<div id="testbed"></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    for (i = 0; i < 5; i++) { 
     $("#testbed").html($("#testbed").html() + "<div id='" + i + "'>Hello!</div>"); 
     $("#" + i).click(function() { 
      alert(i); 
     }); 
    } 
}); 
</script> 

は興味深いことに、代わりに4を警告するのではなく、私はそれだけであなたのclickの最初の4

Answer 1

また、この効果に何かをすることができます：

$.each([1, 2, 3, 4, 5], function(index, value) { 
    $("#testbed").append("<div id='" + index + "'>Hello!</div>"); 
    $("#" + index).click(function() { 
     alert(index); 
    }); 
}); 

Answer 2

すべてを最後のdiv要素にクリック機能を適用していない理由を知りません5.警告しますハンドラは同じi変数を共有しています。
ループの後に、iが5であるので、それらはすべて5と言います。

iをパラメータとする別々の関数で各ハンドラを作成する必要があります。これにより、各ハンドラは独自のiを取得します。

例えば：

function buildElement(i) { 
    $("#testbed").html($("#testbed").html() + "<div id='" + i + "'>Hello!</div>"); 
    $("#" + i).click(function() { 
     alert(i); 
    }); 
} 


for (i = 0; i < 5; i++) { 
    buildElement(i); 
} 

Answer 3

は、次はjavascriptのクロージャと呼ばれています。バインディングの瞬間に、イベントが発生するとalert(i)を実行する別の関数を返す無名関数を実行します。最初の匿名関数 "wraps"は、iの可変スコープの別のレベルを作成するので、元のiが後でインクリメントされると、無名関数内のiは変更されません。気の利いた小さなトリック。 javascript closures

で

<div id="testbed"></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    for (i = 0; i < 5; i++) { 
     $("#testbed").html($("#testbed").html() + "<div id='" + i + "'>Hello!</div>"); 
     $("#" + i).click(function (i) { 
      return function(evt) { 
       // inside here, you have access to the event object too 
       alert(i); 
      }; 
     }(i)); 
    } 
}); 
</script> 

詳しい情報は、すべてのdiv要素にクリックイベントを追加したい場合はところで、あなたはそうのように、代わりに.append()を使用し、すべてのループで.html() に置き換えることはできません。

<div id="testbed"></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    for (i = 0; i < 5; i++) { 
     $("#testbed").append("<div id='" + i + "'>Hello!</div>"); 
     $("#" + i).click(function (i) { 
      return function(evt) { 
       // inside here, you have access to the event object too 
       alert(i); 
      }; 
     }(i)); 
    } 
}); 
</script> 

Answer 4

クリックイベントをオブジェクトに追加する必要があります。

$(function(){ 

     $('#testbed').empty();  

    for (i = 0; i < 5; i++) { 
      $('<div />').text('Hello').attr('id', i).click(function(){ 
       alert($(this).attr('id')); 
      }).appendTo('#testbed'); 
     } 

    });