jQueryのイベントは、新しいdiv要素が

Question

がよし追加されたときに、ここで、失敗した私のジャバスクリプトです：

$().ready(function(){ 
$(".contact").hover(function(){ 
    ... 
}); 
$(".contact").not('.contact[id="'+activeId+'"]').click(function(){ 
    ... 
}); 
$(".contact_chooser_contact").click(function(){ 
    ... 
    $('.contacts').append('<div class="contact" id="'+id+'" title="'+phone+'">\ 
           <div class="contact_img"><img src="src/default_face.png" width="64"/></div>\ 
           <div class="contact_info" id="'+name+'">'+name+' <span class="sms_number">0</span></div>\ 
           <div class="contact_last_sms">\ 
           \ 
           <!-- span class="last_sms_time"> echo $message[sizeof($message)-1]->time; </ -->\ 
           </div>\ 
          </div>');   
    ... 
}); 
}); 

お知らせは、「contact_chooser_contact」でハンドラをクリックするか、私は「.contacts」に別の「が.contact」を追加します、しかし、今私がその新しい ".contact"にぶつかると、それはそうであるような何もしません。どうすればこの問題を解決できますか？私は新しい ".contact"を追加した後で、$（ ".contact"）.hover（）を再初期化しないので、そのことを理解しています。

Answer 1

イベントをon()にバインドする必要があります。これを使用すると、DOMに追加されたすべての要素がそれぞれのセレクタにバインドされます。 on()をlive()よりも使用する利点は、documentではなく、特定のコンテナにコンテキストを絞り込むことができることです。私の例では、コンテキストとしてdocumentを使用します。

jQueryの1.7使用on()

$(document).on('mouseover', '.contact', function(){ 
    ... 
}); 

未満1.7、delegate()は

$(document).delegate('.contact', 'mouseover', function(){ 
    ... 
}); 

未満1.4.2、使用使用live()

$('.contact').live('mouseover', function(){ 
    ... 
}); 

Answer 2

".contact"ドキュメントの読み込み時にイベントを追加します。その後、 ".contact"のイベントから追加されたdivには事実上イベントがありません。 clickイベントが再度実行されないためです。

あなたは次のように行うことができます。

function addDiv(div) { 
    div.hover(function() { 
     ... 
    }); 
} 

$(function() { 

    addDiv($(".contact")); 

    $(".contact_chooser_contact").click(function(){ 
     addDiv($('<div/>').addClass('.contact').attr({id:ID, title: TITLE}).append(...)); 
    }); 
});