Question

当用户点击行内的特定按钮并将其一次又一次地附加到另一个表格时，我想分开一行。

我的下面的脚本分离并附加另一行一次。但是，它继续按照以下点击切换类，它不会进行分离和追加。它也无法更新数据库。

此代码段有什么问题？

$('.orderHideBtn').on('click',function(){
    var $oid = $(this).attr('id').split('-');
    $data = 'a=hideOrder&oid='+$oid[1];
    $.ajax({
        data: $data,
        success: function(msg){
            $('#hbtn-'+$oid[1]).toggleClass("orderHideBtn orderShowBtn").toggleClass('icon-eye-close icon-eye-open').closest('tr').detach().appendTo('#ordersTBody2');
            console.log('#hbtn-'+$oid[1]);
        }
    });
});
$('.orderShowBtn').on('click',function(){
    var $oid = $(this).attr('id').split('-');
    $data = 'a=showOrder&oid='+$oid[1];
    $.ajax({
        data: $data,
        success: function(msg){
            $('#hbtn-'+$oid[1]).toggleClass("orderShowBtn orderHideBtn").toggleClass('icon-eye-open icon-eye-close').closest('tr').detach().appendTo('#ordersTBody1');
            console.log('#hbtn-'+$oid[1]);
        }
    });
});

这些是HTML按钮：

<span id="hbtn-{$o.orderID}" class="orderHideBtn icon-eye-close"></span>

和

<span id="hbtn-{$o.orderID}" class="orderShowBtn icon-eye-open"></span>

Answer 1

当您正在切换相对于hanlder的类和选择器时，不应重新评估，您应该委托事件，例如：

$(document.body).on('click','.orderHideBtn',function(){
    var $oid = this.id.split('-');
    $data = 'a=hideOrder&oid='+$oid[1];
    $.ajax({
        data: $data,
        success: function(msg){
            $('#hbtn-'+$oid[1]).toggleClass("orderHideBtn orderShowBtn").toggleClass('icon-eye-close icon-eye-open').closest('tr').appendTo('#ordersTBody2');
            console.log('#hbtn-'+$oid[1]);
        }
    });
});

我删除了detach（）方法，因为据我所知，这里没用。

jQuery分离和appendTo多次

1 个答案: