.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...
13
ajax jquery ruby-on-rails ruby-on-rails-3

4 ответов

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

пример:

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

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

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

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

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

3