3

このWebページで特定の要素をクリックしたときに強調表示したいのですが、ページの他の場所をクリックすると、これらの要素のすべてが強調表示されなくなります。

私は次の方法でこのタスクを実行しましたが、1つ（以下で説明）を除いて問題なく動作します。

$(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');     
}

要素の強調表示を強制するこの方法は、新しいページをロードせずにページにhtmlを追加するまでは正常に機能します。これは、.append（）および.prepend（）によって実行されます。

デバッグから私が疑ったのは、ページが動的にページに追加された新しい要素を「認識」していないということでした。適切なクラス名/ID/名前/onclicksectを持つ新しい動的に追加された要素にもかかわらず、それらは他の要素のように強調表示されることはありません（これらは常に正常に機能し続けます）。

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

この推論の行が間違っている場合、上記のコードはおそらく私のWebページの何が悪いのかを示すのに十分ではありません。しかし、私はこの考え方が可能かどうかに本当に興味があります。

4

2 に答える 2

4

「現在および将来の現在のセレクターに一致するすべての要素のイベントにハンドラーをアタッチする」ために使用.liveします。例：

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

.delegate同様の、も参照してください。

于 2010-12-28T02:56:41.613 に答える
1

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

jQueryドキュメントから=）

（@karim79がデリゲートメソッドも提案した理由をよりよく説明するためだけに;P）

于 2010-12-28T03:46:09.917 に答える