jQuery detach and appendTo несколько раз

Question

Я хочу отсоединить строку, когда пользователь нажал на определенную кнопку внутри строки и добавит ее в другую таблицу снова и снова.

Мой нижеприведенный сценарий отсоединяет и добавляет другую строку один раз. Однако он продолжает переключать классы на следующие клики, он не делает отсоединение и добавление. Он также не может обновить db.

Что не так с этим фрагментом?

$('.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(), потому что, как я знаю, здесь бесполезно.