.on("click", function() не работает, когда ссылка отображается с помощью ajax

Ниже приведена модальная мода и выполняется запрос ajax для рендеринга частичного внутри модального объекта на основе идентификатора объекта. Ссылка работает нормально, и модальная всплывает, когда страница полностью загружается с помощью HTTP-запроса, но если я визуализую ссылку с помощью ajax-запроса (например, другой модальный всплывает и отображает несколько ссылок), то функция js doesn Не бегай. Я попробовал alert(); просто проверить, и он не запускается при его рендеринге с помощью ajax.

Я использую JQuery 1.9.1, ранее js работал с .live('click'), но с тех пор был удален. Я также пробовал .click()

Любые идеи? Спасибо!

Ссылка

<a href="/an-object-id" data-remote=true name="modal">

$(document).ready(function() {
$("a[name=modal]").on("click", function(e) {
    $("#mask, #modal").show();
    e.preventDefault();
etc...

Ответ 1

Прикрепите обработчик события к родительскому элементу с помощью .on() и передайте селектор в качестве аргумента.

Пример:

$(document).on("click", "a[name=modal]", function(e) {...});

который также работает для динамически сгенерированных элементов.

Ответ 2

$(document).on("click", "a[name=modal]", function(e) {
    $("#mask, #modal").show();
    e.preventDefault();
etc...

Ответ 3

использовать при делегировании делегирования.. поскольку ваша ссылка динамически сгенерирована... событие click не будет запущено... использовать документ для делегирования события.

 $(document).on("click","a[name='modal']", function(e) {
       ..
 });

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

Ответ 4

В принципе, вам нужно связать слушателя для события 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(), будут обрабатываться делегатом.