javascript - jQuery .on() 方法看不到新元素

Question

我正在获取一个 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 元素绑定(bind)点击事件，如下所示:

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

旧的 a 元素显示警报，但新的跟随 URL。事件处理程序不适用于新的。我该如何解决这个问题？

Answer 1

您没有使用正确的代码来获取实时功能。

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

1. 首先，选择您的共同祖先元素(在本例中为#title-items)。如果您想处理所有 a 元素，也可以在此处使用document。
2. 传递事件类型 (on)，然后子选择器 (a)，最后是事件的回调函数。

现在，当 click 事件冒泡到 #title-items 时，它将检查该元素是否是 a 元素，如果是，触发回调。