JQuery klicken Sie irgendwo außer bestimmten divs und Probleme mit dynamisch hinzugefügtem HTML

Question

Ich möchte diese Webseite bestimmte Elemente markieren, wenn Sie auf eine von ihnen klicken, aber wenn Sie irgendwo anders auf der Seite klicken, dann sollten alle diese Elemente nicht mehr sein markiert.

erreichte ich diese Aufgabe durch die folgende, und es funktioniert gut mit einer Ausnahme (wie unten beschrieben):

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

diese Weise die Markierung von Elementen der Durchsetzung funktioniert gut, bis ich mehr html zu addieren, Seite ohne eine neue Seite laden. Dies geschieht durch .append() und .prepend()

Was ich vom Debuggen vermutete, war, dass die Seite die neuen Elemente, die der Seite dynamisch hinzugefügt wurden, nicht "kannte". Trotz der neuen, dynamisch hinzugefügten Elemente mit den entsprechenden Klassennamen/IDs/Namen/onclicks ect werden sie nie wie die übrigen Elemente hervorgehoben (die weiterhin die ganze Zeit funktionieren).

Ich frage mich, ob ein möglicher Grund dafür, warum mein Ansatz für den dynamisch hinzugefügten Inhalt nicht funktioniert, ist, dass die Seite die Elemente nicht erkennen kann, die während des Ladens nicht vorhanden waren. Und wenn das eine Möglichkeit ist, gibt es eine Möglichkeit, dies ohne eine Seitenlast zu vereinbaren?

Wenn diese Argumentation falsch ist, dann ist der Code, den ich oben habe, wahrscheinlich nicht genug, um zu zeigen, was mit meiner Webseite nicht stimmt. Aber ich bin wirklich nur daran interessiert, ob diese Denkrichtung eine Möglichkeit ist oder nicht.

Answer 1

Verwenden .live-„einen Handler auf das Ereignis anhängen für alle Elemente, die den aktuellen Selektor übereinstimmen, jetzt und in Zukunft“. Beispiel:

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

Siehe auch .delegate, die ähnlich ist.

Answer 2

Da die .live() -Methode Ereignisse verarbeitet, sobald sie an den Anfang des Dokuments übertragen wurden, ist es nicht möglich, die Übertragung von Live-Ereignissen zu stoppen. Ähnlich werden Ereignisse, die von .delegate() behandelt werden, immer an das Element weitergegeben, an das sie delegiert wurden. Event-Handler für alle darunter liegenden Elemente wurden bereits zu dem Zeitpunkt ausgeführt, zu dem der delegierte Event-Handler aufgerufen wird.

aus der jQuery-Dokumentation =)

(nur besser zu erklären, warum @ karim79 auch die delegierte Methode vorgeschlagen; P)