Обработка событий HTML-элементов, вставленных jQuery

Question

В настоящее время у меня есть тег привязки, который при нажатии добавляет другой тег привязки к DOM. Все это делается через jQuery. Я знаю, какой будет атрибут id тега привязки, который будет добавлен. Однако, когда я пытаюсь выполнить следующий код, он не может обработать событие click недавно добавленного тега привязки:

$ ("# id"). Click (function () { предупреждение ( "тест"); });

Answer 1

Проблема, с которой вы столкнулись, заключается в том, что когда у вас есть код $('#Element').click(function(){...});, он будет запускать код только для тех элементов, которые присутствовали при первом запуске этого кода, если вы используете последнюю версию jQuery , вы должны использовать этот код, чтобы он работал:

//This makes sure that all the elements are ready to receive jQuery bindings
$(document).ready(function(){

    //The .on function will attach the event to all current
    // elements that match the selector and all future elements
    // that will match the selector
    $(document).on('[EVENT]', '[SELECTOR]', function(){
        //Do Stuff
    });

});

Этот код вместе с любым другим кодом jQuery, который присоединяется к элементам (с использованием функции .on () или нет), все должны находиться в document.ready, как указано выше.

Это запустит событие (В вашем случае [EVENT] будет click) для любого элемента сейчас и в будущем, который соответствует [SELECTOR] (В вашем случае, #id)

Пример JSFiddle: http://jsfiddle.net/DhWmP/

Источник (и): http://api.jquery.com/on/ & Опыт вставки элементов на страницу, требующую функций.

Answer 2

Вы прикрепляете событие click до того, как элемент добавлен в DOM? в этом случае это не сработает. Вам нужно либо прикрепить событие после вставки элемента в DOM, либо добавить прослушиватель, который перехватывает изменения DOM и добавляет событие после обновления DOM (аналогично тому, что делает плагин livequery ).

Answer 3

Возможно ли, что код, который вы вставили сюда, выполняется до того, как новый узел DOM будет фактически доступен? Если это так, вы можете попробовать использовать метод .ready () и прикрепить свой клик после факта.

$("#id").ready(function() {
    $("#id").click(function() { alert("test"); }
});

РЕДАКТИРОВАТЬ: Я сам новичок в jQuery, и я подумал, что метод .ready () может быть использован не только объект документа. Если это не соответствует действительности, похоже, что существует плагин jQuery jQuery.Listen , который делает что-то похожее:

// Listen to clicks, even for newly added instances of #id.
jQuery.listen( 'click', '#id', function(){ alert("test"); });

Примерно так было бы неплохо, если бы вы могли использовать классы для динамически добавляемых якорей.

// Listen to clicks for anything with the class "dynamicAnchors", even newly
// added anchors.
jQuery.listen( 'click', '.dynamicAnchors', function(){ alert("test"); });

Answer 4

Используйте свойство .on для присоединения обработчиков событий к данному тегу:

$(document).on("click", "#id" function(){
    // Do something...
});

Answer 5

Делегирование событий

Если вы обновитесь до новой версии 1.3, у них есть метод live (), который будет обрабатывать делегированные события. Если вы не можете выполнить обновление, вы можете легко выполнить делегирование событий самостоятельно. Объяснил в моем ответе здесь

Answer 6

Как уже говорили другие, вы не можете прикрепить обработчики событий к элементам, которые еще не существуют. Поэтому, если ваш фрагмент кода находится в готовом документе, он не будет работать.

Просто вставьте $("#id").click(function() { alert("test"); }); в код jQuery, который добавляет якорь.