Javascript, обрабатывающий события после загрузки страницы

Question

Когда я пишу какой-то JavaScript, у меня есть набор интерфейсных кнопок, которым назначаются события при загрузке страницы. Моя проблема в том, что все, что создано динамически, не получит эти события.

Например, я делаю проверку URL, чья работа состоит в том, чтобы удостовериться, что любая ссылка, которая идет на другой домен, вызывает интерфейс выхода, позволяющий пользователю знать, что они уходят. Любые ссылки, созданные после загрузки страницы, публикуют ajax (без каламбура) или любые другие, которые не имеют такого события, как те, которые существовали при загрузке страницы.

На практике, каков наилучший способ обеспечения того, чтобы любые вновь созданные элементы получали подобные глобальные события?

Мне нравится использовать jQuery, но это действительно концептуальный вопрос.

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

Answer 1

При использовании jQuery вы можете использовать метод .live () .

Обычно при привязке обработчика событий обработчик событий привязывается к определенному набору элементов.Элементы, добавленные в будущем, не получат обработчик события, пока он не будет повторно связан.

Метод .live () jQuery работает вокруг этого, связывая свой собственный специальный обработчик событий с корнем дерева DOM (полагаясь насобытие пузырится).Если вы щелкнете по элементу, если к нему не подключен обработчик событий, событие всплывет в DOM-дереве.Специальный обработчик событий jQuery перехватывает событие, смотрит на его цель и выполняет все указанные пользователем обработчики событий, которые были назначены для цели через .live ().

Answer 2

Да, проще говоря, где вы могли иметь это раньше:

$('selector').click(function () {});

Замените его на:

$('selector').live('click', function() {});

Answer 3

Вы можете использовать метод .live() jQuery для добавления прослушивателей к элементам, которые создаются после завершения загрузки страницы. Используя ваш пример ссылки выхода (если я правильно понимаю):

$(function(){
    $('a.exitLink').live('click',function(event){ /* do stuff when a link of class exitLink is clicked */);
});

Отвечает на событие click в любой ссылке класса exitLink независимо от того, когда оно было создано (до или после срабатывания onload).

Надеюсь, это поможет:)

Answer 4

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