Question

我有这段代码：

$('.self_delete').on('ajaxSuccess', function(event, xhr, settings) {
    json = jQuery.parseJSON(xhr.responseText);
    if ($(this).attr('href') == json.delete_url ) {
        alert('going to delete');
        $(this).closest($(this).data('parent-selector')).remove();
    } else {
      alert('not this one!');
    }
});

适用于页面上已有的元素。但是当我动态添加新的并单击.self_delete元素时，它不会触发ajaxSuccess（但链接有效）。

如果页面中已有一些项目，我会添加另一项，然后点击最新项目以触发事件，警报“不是这个！”将触发现有元素而不是新元素。

有什么想法吗？ - - 编辑 - - - 我像这样使用委托：

$('#lists').on('ajaxSuccess', '.self_delete', function(event, xhr, settings) {
    json = jQuery.parseJSON(xhr.responseText);
    if ($(this).attr('href') == json.delete_url ) {
        alert('going to delete');
        $(this).closest($(this).data('parent-selector')).remove();
    } else {
      alert('not this one!');
    }
});

现在即使重新加载页面，事件也不会触发。但选择器很好，因为执行$（'＃lists .self_delete'）会返回a.self_delete的数组！（去睡觉，希望有人在我醒来时有一个建议！thx！）

---编辑2 ----- 如果我加上这个：

$('#lists').on('click', '.self_delete', function(event) {
    alert('going to delete from click');
});

警报开火了。在所有情况下。所以基本上，似乎.on（）无法注册ajaxSuccess事件！我试图谷歌这个，但搜索与.on（）相关的任何东西就像是不可能的，这是一个常见的词：-S

Answer 1

$('.self_delete').＆lt; - 此部分正在运行一次 - 第一次加载文档 - 并将处理函数附加到具有类self_delete的所有元素。

您需要使用委托。将处理程序附加到包含对象（在下面的示例中为.container），并在每次调用处理程序时评估.self_delete。

$('.container').on('ajaxSuccess', '.self_delete', function(event, xhr, settings) ...

详细了解.on()

Answer 2

创建动态内容后，您必须重新应用绑定。

Answer 3

在与聊天室里的几个人交谈之后，似乎ajaxSuccess必须附加到一个元素并且不能冒泡。所以我通过将.on（）附加到.self_delete项的父项来修复我的问题，然后使用$ .ajax从那里开始按照预期访问ajaxSuccess。

ajaxSuccess不会触发动态添加的元素

3 个答案: