Question

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

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

我认为所有带有“delete”类的元素都可以在Ajax调用之前或之后删除。因此，当我添加一个类“删除”的新listitem时，我尝试单击它但它不会进入该函数。较旧的物品。

删除功能：

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，请阅读有关委派活动的部分：

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序

Answer 2

您可以使用.on()

为动态创建的内容使用委派事件处理程序

http://api.jquery.com/on/

而不是

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

使用

$(document).on( "click", ".delete" this.deleteListitem); 
 //Instead of document use a parent container that exists in DOM at any give time.

新添加的类.delete的元素默认情况下没有绑定事件，因此这种方法是将事件附加到文档或父容器，并为具有类.delete的元素委派事件现在出现或稍后添加到DOM。

Answer 3

由于元素不在DOM准备就绪，因此您应该将其与.on()

绑定

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

在Ajax Callback之后单击未检测到

3 个答案: