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的点击事件，而不是冒充document对象：

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

上述代码的不同之处在于您甚至在document对象上侦听单击，但验证click事件是否来自具有.delete-person类的子元素。由于click事件将始终冒泡到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
            }

然后超过您的$（文件）

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

每当我有一个使用jquery

的删除函数的动态表时，这就是我所做的

Answer 4

这是因为文档中不存在该元素。你需要使用

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

希望这会有所帮助：）

快乐学习：）

在JQuery问题中，在AJAX之后，Onclick事件不起作用

4 个答案: