在AJAX調用後將腳本附加到元素

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格被點擊，即：（這是擺在.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

對於這樣的動態元素，我會推薦活動代表團：

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

這會將處理程序附加到document，您不必擔心綁定到新元素。

Answer 2

添加函數調用成功回調Ajax調用的，所以每當Ajax調用返回200個狀態的功能將被執行