JQueryは、特定のdivや動的に追加されたHTML以外の部分をクリックします

Question

このWebページでは、特定の要素をクリックするとハイライト表示されますが、ページ上の他の部分をクリックすると、強調表示されます。

私は以下のことで、このタスクを達成し、それが（後述）、一つのことを除いて正常に動作します：私はより多くのHTMLを追加するまでの要素の強調表示を強制するこの方法は、正常に動作します

$(document).click(function() { 
    // Do stuff when clicking anywhere but on elements of class suggestion_box 
    $(".suggestion_box").css('background-color', '#FFFFFF'); 
}); 
$(".suggestion_box").click(function() { 
    // means you clicked on an object belonging to class suggestion_box 
    return false; 
}); 

// the code for handling onclicks for each element 
function clickSuggestion() { 
    // remove all highlighting 
    $(".suggestion_box").css('background-color', '#FFFFFF'); 
    // then highlight only a specific item 
    $("div[name=" + arguments[0] + "]").css('background-color', '#CCFFCC');  
} 

新しいページが読み込まれることなくこれは.append（）と.prepend（）によって行われます。

私はデバッグの疑いがあったのは、ページが動的にページに追加された新しい要素を認識していないことでした。適切なクラス名/ ID /名前/ onclicksなどの新しい動的に追加された要素にもかかわらず、要素の残りの部分と同じように強調表示されることはありません（全体的にうまく動作し続けます）。

なぜ私のアプローチが動的に追加されたコンテンツに対して機能しないのかという理由は、ページがページロード中に存在しなかった要素を認識できないということです。これが可能であれば、ページロードなしでこれを調整する方法はありますか？

この推論のラインが間違っていると、上記のコードは私のウェブページに何が問題なのかを示すには不十分です。しかし、私は本当にこの考え方が可能かどうかに興味があります。

Answer 1

使用.live「今と将来で、現在のセレクタに一致するすべての要素のイベントにハンドラをアタッチ」へ。例：

$(".suggestion_box").live("click", function() { 
    // means you clicked on an object belonging to className 
    return false; 
}); 

も類似している、.delegateを参照してください。

Answer 2

.live（）メソッドは、ドキュメントの一番上に伝播したイベントを処理するため、ライブイベントの伝播を停止することはできません。同様に、.delegate（）によって処理されるイベントは、委任された要素に常に伝播します。委任されたイベントハンドラが呼び出された時点で、その下位の要素のイベントハンドラが既に実行されています。 jQueryのドキュメントから

=）

（karim79 @もデリゲートメソッドを提案した理由だけで良く説明すると、P）