Я использую jQuery v.1.7.1, где метод .live () явно устарел.
Проблема у меня заключается в том, что при динамической загрузке HTML в элемент с помощью:
$('#parent').load("http://...");
Если я попытаюсь добавить событие click после этого, оно не зарегистрирует событие одним из следующих способов:
$('#parent').click(function() ...);
или
// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...);
Как правильно достичь этой функциональности? Кажется, он работает только с .live (), но я не должен использовать этот метод. Обратите внимание, что #child является динамически загружаемым элементом.
Спасибо.
.live()
она расскажет вам, как переписать существующие варианты.live()
использования.delegate()
или.on()
(в зависимости от того, используете ли вы версию 1.7+ или нет). Обратите внимание, что если вы добавите обработчик с.click()
«after», как вы упомянули, т. Е. После динамической загрузки элементов, он должен работать - единственная проблема - попытка назначить его.click()
перед динамической загрузкой элементов.Ответы:
Если вы хотите, чтобы обработчик щелчков работал для элемента, который загружается динамически, то вы устанавливаете обработчик событий для родительского объекта (который не загружается динамически) и назначаете ему селектор, соответствующий вашему динамическому объекту, например:
Обработчик события будет прикреплен к
#parent
объекту, и каждый раз#child
, когда возникнет событие щелчка, возникшее на нем, будет запущен ваш обработчик щелчка. Это называется делегированной обработкой событий (обработка событий делегируется родительскому объекту).Это сделано так, потому что вы можете прикрепить событие к
#parent
объекту, даже если#child
объект еще не существует, но когда он позже существует и щелкается, событие click будет пузыриться до#parent
объекта, оно увидит, что оно возникло,#child
и есть обработчик события для клика#child
и запуска вашего события.источник
live()
против,on()
но сегодня вечером я решил еще раз попробовать, и ваше объяснение сразу показало, чего мне не хватало с самого начала. Спасибо!mouseenter
иmouseleave
событий и испытаний внутри обработчика , который один был вызван. Псевдо-событие hover в jQuery недоступно с делегированием.Попробуй это:
Из
$.on()
документации:Ваш
#child
элемент не существует, когда вы вызываете$.on()
его, поэтому событие не связано (в отличие от$.live()
).#parent
Однако, действительно существует, поэтому связывание события , что это хорошо.Второй аргумент в моем коде выше , действуют как «фильтр» срабатывают только в случае , если событие ого до
#parent
с#child
.источник
.load()
метода, а не из кода после.load()
метода.#child
известно, что он загружается только тогда, когда обработчик успеха выполняется, а не раньше.$(document).on('click', '.selector', function() { /* do stuff */ });
РЕДАКТИРОВАТЬ: Я предоставляю немного больше информации о том, как это работает, потому что ... слова. В этом примере вы размещаете слушателя на весь документ.
Когда вы подходите к
click
любому элементу (элементам).selector
, событие всплывает до основного документа - при условии, что нет других слушателей, вызывающихevent.stopPropagation()
метод - что приведет к нарастанию пузыря события для родительских элементов.Вместо привязки к определенному элементу или набору элементов вы прослушиваете любые события, поступающие от элементов, которые соответствуют указанному селектору. Это означает, что вы можете создать один прослушиватель, один раз, который будет автоматически сопоставлять существующие в настоящее время элементы, а также любые динамически добавленные элементы.
Это разумно по нескольким причинам, включая производительность и использование памяти (в крупномасштабных приложениях)
РЕДАКТИРОВАТЬ:
Очевидно, что ближайший родительский элемент, который вы можете прослушивать, лучше, и вы можете использовать любой элемент вместо тех
document
пор, пока дочерние элементы, для которых вы хотите отслеживать события, находятся внутри этого родительского элемента ... но это действительно не имеет ничего общего с вопросом.источник
$(element).on(...)
. Это$(document).on(...,element,...)
. Разные звери.Эквивалент .live () в 1.7 выглядит так:
По сути, следите за документом по событиям кликов и фильтруйте их по #child.
источник
.live()
делается)..live()
это устарело, является то, что все объекты обработчиков событий в объекте документа плохо размещать. Вещи могут действительно, действительно замедляться. Мало того, что события должны пузыриться до самого документа, у вас может быть много обработчиков событий для просмотра объекта документа. Основным преимуществом.on()
является то, что вы можете прикрепить его к родительскому объекту, который намного ближе к реальному объекту и значительно повысить производительность. Итак ... Я бы не рекомендовал использовать.on()
с объектом документа. Намного лучше выбрать более близкий родительский объект..live()
подход; однако способность контролировать делегирование, безусловно, выгодна.Я знаю, что уже немного поздно для ответа, но я создал polyfill для метода .live (). Я протестировал его в jQuery 1.11, и, похоже, он работает довольно хорошо. Я знаю, что мы должны реализовывать метод .on () везде, где это возможно, но в больших проектах, где невозможно преобразовать все вызовы .live () в эквивалентные вызовы .on () по любой причине, может произойти следующее работай:
Просто включите его после загрузки jQuery и перед вызовом live ().
источник
.on () для jQuery версии 1.7 и выше. Если у вас более старая версия, используйте это:
источник
.delegate()
работает намного лучше, чем.live()
поэтому jQuery doc рекомендует это и не одобряет.live()
. Да,.live()
все еще работает, но ответы здесь на SO должны рекомендовать лучший способ делать вещи. Я видел это 20 раз здесь, на SO. Если вы разместите.live()
здесь код на SO, он получит отрицательный ответ (как правило, не от меня, если с ним что-то серьезно не так)..live()
определенно работает даже в версии 1.7, вы все равно должны использовать.delegate()
или.on()
потому что.live()
устарел по уважительной причине. Если вы заметили, что изменение синтаксиса для двух новых функций будет работать нормально.Я использовал «live» в своем проекте, но один из моих друзей предложил мне использовать «on» вместо live. И когда я попытался использовать это, я столкнулся с проблемой, как у вас.
На своих страницах я динамически создаю ряды таблиц кнопок и многое другое. но когда я использую магию исчезла.
Другие решения, такие как использование, как ребенок, просто вызывает ваши функции каждый раз при каждом нажатии. Но я нахожу способ сделать это снова, и вот решение.
Напишите свой код как:
Позвонить звонящему (); после создания вашего объекта на странице, как это.
Таким образом, ваша функция вызывается, когда предполагается, что не каждый клик на странице.
источник