JQuery щелкните в любом месте, кроме определенных разделов, и проблемы с динамически добавленным html

Question

Я хочу, чтобы на этой веб-странице были выделены некоторые элементы при нажатии на один из них, но если вы щелкнете в другом месте на странице, то все эти элементы больше не будут подсвечен.

Я эту задачу выполнил по следующему, и он прекрасно работает для одной вещи (как описано ниже), за исключением:

$(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()

То, что я подозревал в отладке, было то, что страница не «знала» о новых элементах, которые были добавлены на страницу динамически. Несмотря на новые, динамически добавленные элементы, имеющие соответствующие имена классов/идентификаторы/имена/onclicks ect, они никогда не выделяются, как остальные элементы (которые продолжают работать отлично все время).

Мне было интересно, если возможная причина того, почему мой подход не работает для динамически добавленного контента, заключается в том, что страница не может распознавать элементы, которые не присутствовали во время pageload. И если это возможно, то есть ли способ примирить это без pageload?

Если эта линия рассуждений неверна, то код, который у меня выше, вероятно, недостаточен, чтобы показать, что не так с моей веб-страницей. Но меня действительно интересует, возможна ли эта линия мысли.

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)