jquery在添加.append后忽略代码

时间:2014-07-06 18:39:15

标签: jquery

您好我正在使用.append函数从ajax响应中添加一行,但delete函数忽略了新创建的记录。你可以在http://booking.everythingcreative.co.uk/index2.php看到这个工作。我无法看到我出错的地方

插入行代码:

var record =    '<tr id="customer_'+ outcome['id'] +'">\
                                    <td>'+ outcome['firstname'] +'</td>\
                                    <td>'+ outcome['surname'] +'</td>\
                                    <td>'+ outcome['email'] +'</td>\
                                    <td>'+ outcome['training'] +'</td>\
                                    <td><a class="confirmation button_live" href="tcpdf/PDF/testPDF.php?id='+ outcome['id'] +'&version=email">Send Invitation</a></td>\
                                    <td><a class="confirmation button_live" href="tcpdf/PDF/testPDF.php?id='+ outcome['id'] +'&version=download">Download</a></td>\
                                    <td>???????</td>\
                                    <td><a href="#" id="delete_'+ outcome['id'] +'" class="button_delete">Remove</a></td>';
                    $(".global_table tr:nth-last-child(2)").after(record);

删除代码:

$("body").on("click", ".global_table .button_delete", function(e) {
         e.preventDefault();
         var clickedID = this.id.split('_'); //Split ID string (Split works as PHP explode)
         var DbNumberID = clickedID[1]; //and get number from array
         var myData = 'recordToDelete='+ DbNumberID; //build a post data structure

        $('#customer_'+DbNumberID).addClass( "sel" ); //change background of this element by adding class
        $(this).hide(); //hide currently clicked delete button

            jQuery.ajax({
            type: "POST", // HTTP method POST or GET
            url: "assets/scripts/ajax.php", //Where to make Ajax calls
            dataType:"text", // Data type, HTML, json etc.
            data:myData, //Form variables
            success:function(response){
                //on success, hide  element user wants to delete.
                $('#customer_'+DbNumberID).fadeOut();
            },
            error:function (xhr, ajaxOptions, thrownError){
                //On error, we alert user
                alert(thrownError);
            }
            });
    });

正如您所看到的,customer_id正在使用新行创建,因此我不知道为什么$('#customer_'+DbNumberID).fadeOut();没有响应

1 个答案:

答案 0 :(得分:1)

创建新记录时,会在两个位置添加:

$(".global_table tr:nth-last-child(2)").after(record);

有两个带有“global_table”类的表,第一个表是隐藏的。 执行此代码时:

$('#customer_'+DbNumberID).fadeOut();

仅选择第一个元素(隐藏),第二个元素保持可见。