javascript - Ajax 回调后未检测到点击

Question

我目前正在测试一些相当简单的东西。在我的项目中，您可以通过表单添加一个列表项，并在更新的列表中立即将其删除。在文件的开头，我绑定(bind)了删除点击处理程序:

$(".delete").bind("click", this.deleteListitem);

我认为所有类为“delete”的元素都可以在 Ajax 调用之前或之后删除。因此，当我添加一个带有“删除”类的新列表项时，我尝试单击它但它没有进入该功能。较旧的项目。

删除函数:

PanelRoadtrip.prototype.deleteListitem = function(e)
{
    console.log("click");
    e.preventDefault();

    this.listId = $(event.currentTarget).parent().parent().attr("id");
    this.listItemValue = $(event.currentTarget).parent().text().split(" delete")[0];
    $.ajax({
        type: "delete",
        url: Util.api + "/roadtrip/delete/" + this.tripId + "/" + this.listId + "/" + this.listItemValue,
        dataType: "json"
    });
    //item verwijderen
    $(event.currentTarget).parent().remove();
};

是否有人针对这个问题有一个简单的解决方案，在 Stackoverflow 上进行了搜索，但没有找到有效的解决方案。

提前致谢

Answer 1

您需要使用 on() 而不是 bind() 更改:

$(".delete").bind("click", this.deleteListitem);

到

$(document).on("click",".delete", this.deleteListitem);

(其中 document 是加载时 DOM 上 .delete 的父元素。

Docs for on() are here ，请阅读委托(delegate)事件部分:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers