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在运行时不存在时），因此单击事件不会绑定到元素。

该行在$('.delete-person').on('click', function() { ... });功能上与 相同$('.delete-person').click(function() { ... });。要点是您将 click 事件处理程序附加到 element .delete-person，它在运行时不存在于 DOM 中。

取而代之的是，监听源自.delete-person它的点击事件冒泡到document对象上：

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

上述代码的不同之处在于，您甚至在侦听document对象上的单击，但验证单击事件是否源自具有.delete-person. 由于document在运行期间无论对象是否存在，单击事件始终会冒泡到，因此您可以通过这种方式删除该人;)