.on ("click", function() не работает, когда ссылка отображается с помощью ajax
ссылка ниже показывает модальный и запускает запрос ajax для рендеринга частичного в модальном на основе идентификатора объекта . Ссылка работает нормально, и модальный всплывает, когда страница полностью загружена http-запросом, но если я отображаю ссылку с запросом ajax (например, появляется другой модальный и отображает несколько ссылок), то функция js не запускается. Я попробовал alert (); просто проверить, и он не запускается, когда его визуализируют с помощью ajax.
Я использую JQuery 1.9.1, ранее с js работал .live ('click'), но с тех пор это было удалено. Я тоже пытался .нажмите кнопку()
какие идеи? Спасибо!
ссылке
<a href="/an-object-id" data-remote=true name="modal">
JS
$(document).ready(function() {
$("a[name=modal]").on("click", function(e) {
$("#mask, #modal").show();
e.preventDefault();
etc...
4 ответов
присоедините обработчик событий к родительскому элементу с помощью .on (), и передать селектор в качестве аргумента.
пример:
$(document).on("click", "a[name=modal]", function(e) {...});
который работает и для динамически генерируемых элементов..
$(document).on("click", "a[name=modal]", function(e) {
$("#mask, #modal").show();
e.preventDefault();
etc...
использовать делегирование событий..поскольку ваша ссылка динамически генерируется... событие click не быть уволенным... используйте document для делегирования события..
$(document).on("click","a[name='modal']", function(e) {
..
});
вы можете пройти через ссылке подробнее о on
делегированных событий.. будет намного лучше, если вы делегируете событие с ближайшим элементом, который присутствует в документе, чем document
для лучшей производительности
в основном, вам нужно привязать прослушиватель для вашего события click к чему-то в DOM, что не изменяется. on()
имеет необязательный параметр, который позволяет фильтровать события для дочернего элемента для элемента, выбранного в качестве слушателя. Самый простой-использовать document
, но я предпочитаю использовать ближайшего родителя, которого я знаю, я не изменюсь. Итак, предполагая, что у меня была эта разметка:
<div id="super-awesome-parent">
<ul>
<li><a href="#">Some link text</a></li>
<li><a href="#">Some link text</a></li>
<li><a href="#">Some link text</a></li>
<li><a href="#">Some link text</a></li>
<li><a href="#">Some link text</a></li>
</ul>
</div>
я мог бы написать on()
делегат вот так:
$('#super-awesome-parent').on('click', 'a', function(event){
// ... code
});
тогда,<a>
элементы, которые добавляются в #super-awesome-parent
после ready()
событие по-прежнему будет обрабатываться делегатом.