Метод jQuery .on () не видит новые элементы - PullRequest
Новая
       26

Метод jQuery .on () не видит новые элементы

46 голосов
/ 28 декабря 2011

Я получаю элемент JSON и создаю список из его элементов, например: 

getTitles: function(data) {
    data = data || {};
    var list = [];

    $.getJSON(
        '/titles',
        data,
        function(data) {
            $.each(data.data, function(key, val) {
                list.push(
                    '<li><a href="'+ val.href +'">'+ val.title +'</a><span class="count">'+ val.count +'</span></li>'
                )
            });

            $('#title-items').html(list.join(''));
        }
    );
}

И я связываю событие click для a элементов, подобных этому: 

$('a').on('click', function(e) {
    alert('clicked');
    e.preventDefault();
});

Старые элементы показывают предупреждение, но новые следуют за URL.Обработчик событий не работает для новых.Как я могу решить это?

Ответы [ 3 ]

132 голосов
/ 28 декабря 2011

Вы не используете правильный код для получения live функциональности. 

$('#title-items').on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});
  1. Сначала выберите элемент общего предка (#title-items в этом примере).Вы также можете использовать document здесь, если хотите обработать все a элементов.
  2. Передать тип события (on), , затем субселектор (a), а затем функция обратного вызова для события.

Теперь, когда click события всплывают до #title-items, он проверит, является ли элемент a элемента, и если это так, запустить обратный вызов.

13 голосов
/ 28 декабря 2011

Вы хотите использовать делегирование событий для захвата событий, вызванных событиями, которые присутствуют в DOM в любой момент времени: 

$(<root element>).on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});

ОБНОВЛЕНИЕ - В этом примере <root element> является предком ссылок, к которым вы привязываетесь, которые присутствуют в DOM во время привязки.

Основная идея состоит в том, что, поскольку мы еще не можем прикрепить обработчик событий к элементу DOMв DOM мы прикрепляем обработчик события к элементу-предку и ждем, пока событие не всплывет к элементу-предку.Как только событие достигает события предка, свойство event.target проверяется, чтобы увидеть, что было изначально выбранным элементом.

0 голосов
/ 26 февраля 2015

Вы можете использовать библиотеку receive.js (она использует MutationObserver внутри).

...