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

Я получаю элемент 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(''));
        }
    );
}

И я связывание события клика для a элементы, как это:

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

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

Ответ 1

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

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

Сначала выберите общий элемент предка (#title-items в этом примере). Вы можете использовать document здесь тоже, если хотите обрабатывать все элементы a.
Передайте тип события (on), затем субселектор (a), а затем функцию обратного вызова для события.

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

Ответ 2

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

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

UPDATE. В этом примере <root element> является предком ссылок, к которым вы привязываетесь, которые присутствуют в DOM во время привязки.

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

Ответ 3

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

document.arrive('a', function(){
    // 'this' refers to the newly created element
    var newElem = this;
});