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元素绑定click事件:

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

旧的元素显示警报但新的元素遵循URL.事件处理程序不适用于新事件处理程序.我怎么解决这个问题？

Answer 1

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

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

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

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

Answer 2

您希望使用事件委派来捕获在任何时间点在DOM中出现的事件触发的事件:

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

更新 - 在此示例中<root element>,它是绑定时绑定到的DOM的链接的祖先.

基本思想是,由于我们无法将事件处理程序附加到DOM中尚未存在的DOM元素,因此我们将事件处理程序附加到祖先元素并等待事件冒泡到祖先元素.一旦事件到达祖先事件,event.target就会检查属性以查看最初单击的元素是什么.