Question

我正在构建一个ASP.Net Web API应用程序，供用户创建待办事项。在对用户项目列表发出GET请求后，我试图在单击某个元素时附加特定函数。

在GET请求中（在单独的文件中完成），以下内容将附加到主页中的todo-list div：

$('<div class="single-todo"> +
  '<div class="td-delete"><div class="delete-todo" title="Delete" data-id="' + id + '" data-username="' + username + '"></div></div>' +
  '<div class="td-title">' + title + '</div>' + 
  '</div>').appendTo('#todo-list');

在主页面中，我试图在单击delete-todo div时附加一个函数，即:(这是放在.ready()函数中）

$(".delete-todo").on('click', function () {
    var username = $(this).data("username");
    var id = $(this).data("id");
    DeleteTodo(id, username);
});

（这里，DeleteTodo()是js文件中的一个函数）。当单击delete-todo div时，它永远不会被调用，唯一的可能是delete-todo div最初不存在（只有在AJAX调用完成后才存在）。

如何在AJAX调用之后附加要执行的函数调用，而无需通过内联代码生成相同的函数？

Answer 1

在ajax调用的成功回调中添加函数调用，因此每当ajax调用返回200状态时，函数将被执行

Answer 2

对于像这样的动态元素，我建议事件委派：

$(document).on('click', ".delete-todo", function () {
    //...
});

这会将处理程序附加到document，您无需担心绑定到新元素。

在AJAX调用之后将脚本附加到元素

2 个答案: