2

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

$(".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 上搜索，但没有找到任何有效的方法。

提前致谢

4

3 回答 3

4

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

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

至

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

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

文档on()在这里，阅读委托事件部分：

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

于 2013-05-16T14:37:38.673 回答
1

您可以使用委托事件处理程序来动态创建内容.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 的类的元素。

于 2013-05-16T14:37:35.003 回答
0

由于该元素在 DOM 中没有准备好，因此您应该将其绑定到.on()

$(document).on("click", ".delete", this.deleteListitem);
于 2013-05-16T14:37:47.143 回答