JQuery問題中的AJAX之后，onclick事件不起作用

Question

這是Jquery代碼：

$("#save").on ('click', function(){  // save new person
    var new_name = $("#name").val();
    var new_age = $("#age").val();

    var formData = { name : new_name, age : new_age }; 

    $.ajax({
        url : "ajax.php",
        type: "POST",
        data : formData,
        success: function(data, textStatus, jqXHR){
            get_old_html = $("#result_json").html(); // getting current html data
            var array = JSON.parse(data);  // getting the JSON
            var html = "";
            for (var i = 0 ; i < array.length; i++){
                var split = array[i].split("||");
                html = html + "<tr><td>"+ split[1] +"</td><td>"+ split[2]  +"</td><td><center><a href ='#' class ='delete_person' id ='"+ split[0] +"'>X</a></center></td></tr>"; // create the new html with the new item
            }
            $("#result_json").html(html + get_old_html); // add the new html and the content of it

            $("#add_new_person").hide();
            $("#add_person").show(); 
                //mesaj de confirmare
        },
        error: function (jqXHR, textStatus, errorThrown){
            console.log(errorThrown);
        }
    });
});

$(".delete_person").on('click',function(){  //delete person
    id = $(this).attr("id");
    var formData = { id : id };
    $.ajax({
        url : "ajax.php",
        type: "POST",
        data : formData,
        success: function(data, textStatus, jqXHR){
            var remove = JSON.parse(data);  // getting the JSON
            if (remove == "success"){
                $("#"+id).closest("tr").remove();
            }
        },
        error: function (jqXHR, textStatus, errorThrown){
            console.log(errorThrown);
        }
    });
});

事實是，當我保存一個新人，然后要刪除該人時，類“ delete_person”上的onclick事件不起作用。 但是，當我刷新頁面時，它可以工作。 我該怎么辦 ？ 並且所有這些都包含在$( document ).ready(function() { });

Answer 1

.delete-person是在進行 AJAX調用后動態添加到DOM中的元素。 由於您的jQuery腳本是在DOMready上運行的（當運行時.delete-person不存在時），因此click事件不會綁定到該元素。

行$('.delete-person').on('click', function() { ... }); 在功能上與$('.delete-person').click(function() { ... }); 。 要點是要將click事件處理程序附加到元素.delete-person ，該元素在運行時不存在於DOM中。

相反，請監聽源自.delete-person的click事件，該事件正在冒泡至document對象：

$(document).on('click', '.delete-person', function() {
    // Do stuff here to delete person
});

上面的代碼的不同之處在於，即使在document對象上，您也在偵聽單擊，但是驗證click事件是否源自具有.delete-person類的子元素。 由於單擊事件將始終冒泡到document而不管對象在運行時是否存在，因此您可以通過這種方式刪除人員；）

Answer 2

確保響應數據和使用

$(this).closest("tr").remove(); 

或嘗試：

$(".delete_person").on('click',function(){ 
    var element = $(this);

然后

$(element).closest("tr").remove(); 

Answer 3

我認為您應該只添加一個本機javascript函數

for (var i = 0 ; i < array.length; i++){
                var split = array[i].split("||");
                html = html + "<td><a href='#' onlick='deletePerson("+split[1]+")'>Delete</a></td>" // create the new html with the new item
            }

然后超過您的$（document）

function deletePerson(id){
    var person_id = id  ;
    //ajax code here
 }

每當我有一個具有使用jquery的刪除功能的動態表時，這就是我要做的

Answer 4

這是因為該元素在文檔中不存在。 您需要使用

$(document).on("click", "selector", function(){do something});

希望這可以幫助 ：）

快樂學習:)