Начиная с jQuery 1.7 вы должны использовать jQuery.fn.on
:
$(staticAncestors).on(eventName, dynamicChild, function() {});
До этого рекомендуемый подход заключался в использовании live()
:
$(selector).live( eventName, function(){} );
Тем не менее, live()
был признан устаревшим в 1.7 в пользу on()
, и полностью удален в 1.9. live()
Подпись:
$(selector).live( eventName, function(){} );
... можно заменить следующей on()
подписью:
$(document).on( eventName, selector, function(){} );
Например, если на вашей странице динамически создавались элементы с именем класса, dosomething
вы бы связали событие с уже существующим родителем (здесь это проблема, вам нужно нечто, с чем можно связываться, не связывайтесь с динамический контент), это может быть (и самый простой вариант) document
. Хотя имейте в виду, document
возможно, не самый эффективный вариант .
$(document).on('mouseover mouseout', '.dosomething', function(){
// what you want to happen when mouseover and mouseout
// occurs on elements that match '.dosomething'
});
Любой родитель, который существует в то время, когда событие связано, хорошо. Например
$('.buttons').on('click', 'button', function(){
// do something here
});
будет применяться к
<div class="buttons">
<!-- <button>s that are generated dynamically and added here -->
</div>
В документации есть хорошее объяснение
jQuery.fn.on
.Короче говоря:
Таким образом, в следующем примере
#dataTable tbody tr
должен существовать до генерации кода.Если на страницу внедряется новый HTML, предпочтительно использовать делегированные события для присоединения обработчика событий, как описано далее.
Преимущество делегированных событий заключается в том, что они могут обрабатывать события от элементов-потомков, которые добавляются в документ позднее. Например, если таблица существует, но строки добавляются динамически с использованием кода, следующее будет обрабатывать это:
В дополнение к их способности обрабатывать события на дочерних элементах, которые еще не созданы, еще одним преимуществом делегированных событий является их возможность значительно снизить накладные расходы, когда необходимо отслеживать многие элементы. В таблице данных с 1000 строк в
tbody
первом примере кода присоединяется обработчик к 1000 элементам.Подход с делегированными событиями (второй пример кода) прикрепляет обработчик событий только к одному элементу
tbody
, и событие должно подниматься только на один уровень (от щелчкаtr
доtbody
).Примечание: делегированные события не работают для SVG .
источник
tr
соответствующий селектор, например'input[type=checkbox]'
, и это будет автоматически обрабатываться для вновь вставленных строк?Это чистое решение JavaScript без каких-либо библиотек или плагинов:
где
hasClass
находитсяLive demo
Кредит идет на Дейва и Симе Видас
Используя более современный JS,
hasClass
можно реализовать как:источник
Element.classList
не поддерживается в старых браузерах. Например, IE <9.Вы можете добавлять события к объектам при их создании. Если вы добавляете одни и те же события к нескольким объектам в разное время, создание именованной функции может оказаться подходящим вариантом.
источник
Вы можете просто обернуть свой вызов привязки события в функцию, а затем вызвать его дважды: один раз в готовом документе и один раз после события, которое добавляет новые элементы DOM. Если вы сделаете это, вы захотите избежать связывания одного и того же события дважды с существующими элементами, поэтому вам нужно либо отменить привязку существующих событий, либо (лучше) связать только с вновь созданными элементами DOM. Код будет выглядеть примерно так:
источник
Попробуйте использовать
.live()
вместо.bind()
;.live()
будет связываться.hover
с вашим флажком после запроса выполняет Ajax.источник
live()
был объявлен устаревшим в версии 1.7 в пользуon
и удален в версии 1.9.Привязка событий к динамически создаваемым элементам
Единственный элемент:
Детский элемент:
Обратите внимание на добавленное
*
. Событие будет запущено для всех дочерних элементов этого элемента.Я заметил, что:
Он больше не работает, но работал раньше. Я использовал jQuery из Google CDN , но я не знаю, изменили ли они его.
источник
Вы можете использовать метод live () для привязки элементов (даже недавно созданных) к событиям и обработчикам, таким как событие onclick.
Вот пример кода, который я написал, где вы можете увидеть, как метод live () связывает выбранные элементы, даже недавно созданные, с событиями:
источник
Я предпочитаю использовать селектор и применяю его к документу.
Это привязывает себя к документу и будет применяться к элементам, которые будут отображаться после загрузки страницы.
Например:
источник
selector
переменной, когда он должен содержать либо строку, либо объект Element, который вы можете просто передать непосредственно этому аргументуon()
Другое решение - добавить слушателя при создании элемента. Вместо того, чтобы поместить слушателя в тело, вы помещаете слушателя в элемент в тот момент, когда вы его создаете:
источник
myElement.append('body');
должно бытьmyElement.appendTo('body');
. С другой стороны, если нет необходимости дальнейшего использования переменной,myElement
это проще и короче так:$('body').append($('<button/>', { text: 'Go to Google!' }).bind( 'click', goToGoogle));
Попробуй вот так -
источник
Обратите внимание на класс «MAIN», в который помещается элемент, например,
В приведенном выше сценарии MAIN-объект, который jQuery будет наблюдать, является «контейнером».
Тогда вы будете в основном имеют имена элементов под контейнер , например
ul
,li
иselect
:источник
Это делается делегированием мероприятия . Событие будет привязано к элементу класса-оболочки, но будет делегировано элементу класса-селектора. Вот как это работает.
Замечания:
Элемент класса-обертки может быть чем угодно. документ, тело или ваша обертка. Оболочка уже должна существовать . Тем
selector
не менее, не обязательно должны быть представлены во время загрузки страницы. Он может прийти позже , и это событие свяжет наselector
обязательном порядок .источник
вы могли бы использовать
или
эти два метода эквивалентны, но имеют другой порядок параметров.
см .: jQuery Delegate Event
источник
delegate()
сейчас устарела. Не используйте его.Вы можете прикрепить событие к элементу при динамическом создании с помощью
jQuery(html, attributes)
.источник
Вот почему динамически созданные элементы не реагируют на клики:
В качестве обходного пути вы должны прослушать все клики и проверить элемент источника:
Это называется «делегирование событий». Хорошие новости, это встроенная функция в jQuery :-)
источник
Любая часть, которая существует в то время, когда событие связано, и если бы ваша страница динамически создавала элементы с помощью кнопки имени класса , вы бы связали событие с уже существующим родителем.
источник
Привязать событие к родителю, который уже существует:
источник
Используйте
.on()
метод jQuery http://api.jquery.com/on/, чтобы прикрепить обработчики событий к активному элементу.Также с версии 1.9
.live()
удален метод.источник
Я предпочитаю, чтобы прослушиватели событий были развернуты в модульной форме, а не в сценарии
document
прослушивателя событий уровня. Итак, мне нравится ниже. Обратите внимание, что вы не можете переподписать элемент с одним и тем же слушателем событий, поэтому не беспокойтесь о подключении слушателя более одного раза - только одна палка.источник
Еще одно гибкое решение для создания элементов и привязки событий ( источник )
Примечание: это создаст экземпляр обработчика событий для каждого элемента (может повлиять на производительность при использовании в циклах)
источник
источник
Я искал решение, чтобы получить
$.bind
и$.unbind
работать без проблем в динамически добавленных элементах.As on () делает трюк для прикрепления событий, чтобы создать ложную привязку к тем, к кому я пришел:
источник