Ajax回调后未检测到单击

Question

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

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

我认为可以在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() change：

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

至

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

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

on()文档on()这里 ，请阅读有关委托事件的部分：

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

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元素没有事件绑定，因此这种方式是将事件附加到文档或父容器，并为现在存在或以后添加到DOM中的类为.delete元素委托事件。

Answer 3

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

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