События Javascript, не присоединенные после частичной перезагрузки в IE7 +

Question

У меня есть файл js, который загружается для всех страниц и содержит функцию всплывающего диалогового окна:

$(document).ready(function() {

    $('a.popup').on('click', function(e) {
        alert('Show Dialog');
    });
});

Это работает при первой загрузке страницы.Однако, когда элемент объекта обновляется с использованием:

$(this).html(data);

Кажется, что событие a.popup больше не присоединяется.Эта проблема возникает только в IE7 +.Работает в Chrome, Firefox и Opera.Кто-нибудь знает, что может быть причиной проблемы и как ее обойти?

Answer 1

Вместо:

$('a.popup').on('click', function(e) {
    alert('Show Dialog');
});

Использование:

$('body').on('click', 'a.popup', function(e) {
    alert('Show Dialog');
});

Смотри также: http://api.jquery.com/on/

Answer 2

Из jQuery API :

Обработчики событий привязываются только к выбранным в данный момент элементам;они должны существовать на странице в тот момент, когда ваш код вызывает .on ().Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните привязку событий внутри обработчика готовых документов для элементов, которые находятся в разметке HTML на странице. Если на страницу внедряется новый HTML, выберите элементы и прикрепите обработчики событий после размещения нового HTML на странице.Или используйте делегированные события для присоединения обработчика событий, как описано далее.

Преимущество делегированных событий заключается в том, что они могут обрабатывать события из элементов-потомков, которые добавляются в документ позднее.Выбрав элемент, который гарантированно будет присутствовать во время прикрепления делегированного обработчика событий, вы можете использовать делегированные события, чтобы избежать необходимости частого присоединения и удаления обработчиков событий.Этот элемент может быть, например, контейнерным элементом представления в модели Model-View-Controller или документом, если обработчик событий хочет отслеживать все всплывающие события в документе.Элемент документа доступен в заголовке документа перед загрузкой любого другого HTML-кода, поэтому безопасно прикреплять туда события, не дожидаясь готовности документа.

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

$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});

Подход с делегированными событиями присоединяет обработчик событий только к одному элементу,tbody, и событие должно всплыть только на один уровень (от нажатой tr до tbody):

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});

Answer 3

Попробуйте использовать live функцию для привязки событий

См. http://api.jquery.com/live/