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

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

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

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
4
0
4 144
6

Ответы 6

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

Возможно ли, что код, который вы здесь вставили, выполняется до того, как новый узел 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"); });

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

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

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

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

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

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

Цитата с этой страницы: Начиная с jQuery 1.7, метод .live () устарел. Используйте .on () для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate () вместо .live ().

JakeJ 22.06.2012 18:12

Проблема в том, что когда у вас есть код $('#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/ и опыт вставки на страницу элементов, которые нуждаются в функциях.

Другие вопросы по теме