新しく追加されたdivは、ドキュメントハンドラでイベントハンドラを継承しません

Question

実行時に新しいdivを追加すると、新しく作成されたdivはドキュメントハンドラでイベントハンドラと接続されません。例えば

、文書準備で現在のイベントハンドラに新しいdiv要素を割り当てる方法http://jsfiddle.net/nFG24/

？

Answer 1

ショートカットイベントハンドラ（例えばclick()、mouseover()など）のみページの読み込みでDOMに利用可能である要素に適用されます。動的に要素を追加するときは、このように、静的な親要素にイベントを添付し、あなたがにイベントを委譲したいフィルタを供給する必要があります。私は主セレクタとして、ここでbodyを使用しました

$("body").on('mouseover', '.hoverme', function() { 
    $(this).css({backgroundColor: '#000'});      
}); 
$("body").on('mouseout', '.hoverme', function() { 
    $(this).css({backgroundColor: '#0af'});     
}); 

注意を。理想的には、DOMに動的に追加されない.hoverme要素に最も近い要素を使用してください。

Working fiddle

また、あなたは少しhover()を使用してコードを整理することができます

$("body").on('hover', '.hoverme', function(e) { 
    if (e.type === 'mouseenter') 
     $(this).css({backgroundColor: '#000'}); 
    else 
     $(this).css({backgroundColor: '#0af'});   
}); 

Example fiddle

Answer 2

まだ.on（）を使ってみましたか？ jQuery 1.7の古いバージョンでは.bind（）？

.on（）

説明：選択した要素に1つ以上のイベント のイベントハンドラ関数を取り付けます。

http://api.jquery.com/on/

.bind（）

説明：要素のイベントにハンドラをアタッチ。

http://api.jquery.com/bind/

Answer 3

または（ライブ使用してください）。これは、1.7では非推奨となったが、まだ[jQueryの上の1.7（）とオフ（）動的な要素のための方法]（http://stackoverflow.com/questions/の

$(".hoverme").live('mouseover', function() 
{ 
    $(this).css({backgroundColor: '#000'});      
}); 
$(".hoverme").live('mouseout', function() 
{ 
    $(this).css({backgroundColor: '#0af'});     
});