jQuery.bind'ing вещи, загруженные с jQuery.load

Question

При использовании jQuery.load для динамической загрузки содержимого HTML на веб-страницу, какой лучший способ «перепривязать» любые обработчики?

Обычно вы связываете обработчики в jQuery.ready, но они, очевидно, не работают с вновь загруженным контентом. Это для обработчиков, используемых как снаружи, так и внутри загруженного контента, поэтому просто связать их в функции успеха load не очень приятно.

Answer 1

При подписке на эти обработчики вы можете использовать функцию .on, которая позволяет подписаться даже на еще не существующие элементы DOM, и когда они будут добавлены, подписка будет завершена. Функция .on была введена в jQuery 1.7. Если вы используете более старую версию, вы можете использовать функцию .delegate для достижения того же эффекта, который был представлен в jQuery 1.4.2. А если вы используете еще более старую версию, вы можете использовать метод .live.

Вот пример того, как вы можете подписаться на событие click какого-либо элемента (существующего или еще не существующего, который будет добавлен в будущем):

$('#someParentElement').on('click', '#someElement', function() {

});

Answer 2

Вам необходимо делегировать события для нового содержимого в статический родительский элемент, например:

$("#myDiv").load(myUrl);

$("#myDiv").on('click', '#myElement', function() {
    // do stuff when #myElement (which was part of the HTML 
    // returned in the load() call) is clicked.
})

Предполагается, что вы используете jQuery 1.7+, если нет, используйте delegate():

$("#myDiv").delegate('#myElement', 'click', function() {
    // do stuff when #myElement (which was part of the HTML 
    // returned in the load() call) is clicked.
})