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元素绑定点击事件：

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

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

Answer 1

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

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

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

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

Answer 2

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

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

UPDATE - 在此示例中，<root element>是绑定时绑定到的DOM的链接的祖先。

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

Answer 3

您可以使用arrive.js库（内部使用MutationObserver）。

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

Answer 4

关于接受的答案，请注意，如果您将 a 用作 jQuery 对象而不是 string - 如果您在 jQuery 选择器中犯错误 - 该事件将始终点击 #title-items 时触发（无论 a / p 等..）

var a_links1 = $('a');
var a_links2 = $('bla');

$('#title-items').on('click', a_links1, function(e) {
    alert('clicked');   <= fire only on <a> elements
});

$('#title-items').on('click', a_links2, function(e) {
    alert('clicked');   <= fire on every element under <#title-items>
});

除非你会使用字符串

$('#title-items').on('click', 'a', function(e) {
    alert('clicked');   <= fire only on <a> elements
});

$('#title-items').on('click', 'bla', function(e) {
    alert('clicked');   <= won't fire at all, as the selector won't match anything
});

jsFiddle：https://jsfiddle.net/7f8y5ak6/1/

了解这一点很重要，因为当您期望在将来（或在单击之后）添加 $('bla') 时 - 但您在此之前加载了绑定事件 - jQuery 的选择器不会“找到“/”看到“它们 - 那么当一切都可点击时，您应该会出现这种行为。

Answer 5

这个对我有用https://www.learningjquery.com/2017/02/jquery-on-method-the-issue-of-dynamically-added-elements

用作直接事件的 jQuery .on() 方法不适用于动态添加的元素。通过传递 selector 参数来使用委托事件，以便容器负责在将来动态添加元素时执行事件。

您可以将 .on 保留在 $(document).ready 的内部或外部，这两个日志都可以使用！

自定义标签

$(document).on("click","[mycustomtag]", function(){
    console.log("Clicked.");
});

用于 HTML 类或 ID 等

$(document).on("click","div", function(){
    console.log("Clicked.");
});

jQuery .on（）方法没有看到新元素

5 个答案: