使用AJAX更新後，jquery點擊不起作用

Question

我已閱讀了一些關於我的問題，仍然沒有得到正確的答案。我嘗試使用.on（）方法，但它仍然無法正常工作。我正在使用Laravel。加載頁面，但之後

@foreach($orders as $order) 
    <tr class="item{{$order['menus']['id']}}"> 
     <td>{{$order['menus']['name'] }}</td> 
     <td>{{$order['quantity']}}</td> 
     <td>{{$order['quantity'] * $order['menus']['price']}}</td> 
     <td><span id="paddingcustom"><span class="glyphicon glyphicon-minus cancelbox " data-menuid="{{$order['menus']['id']}}"></span></span> </td> 
     <td></td> 
    </tr> 
@endforeach 

JS

$('.cancelbox').each(function(){ 
    $(this).on('click',function(){ 
     $.ajax({ 
      type : 'POST', 
      url : 'menus/deleteTmp', 
      data : { 
       '_token' : $('input[name=_token]').val(), 
       'id' : $(this).data('menuid'), 
      }, 
      success : function ($data) { 
       $('.item' + $data).remove(); 
      } 
     }); 
    }); 
}); 

一切工作我想，當我用replaceWith（）方法，然後的onclick不起作用更新的元素。

我檢查了我更新的HTML和屬性，所有的都在正確的地方。

Answer 1

您需要使用Event Delegation： -

因此改變:: -

$('.cancelbox').each(function(){ 
    $(this).on('click',function(){ 

要:: -

$(document).on('click','.cancelbox',function(){ 

所以代碼必須： -

$(document).on('click','.cancelbox',function(){ 
    $.ajax({ 
     type : 'POST', 
     url : 'menus/deleteTmp', 
     data : { 
      '_token' : $('input[name=_token]').val(), 
      'id' : $(this).data('menuid'), 
     }, 
     success : function ($data) { 
      $('.item' + $data).remove(); 
     } 
    }); 
}); 

注意： - 現在申請您的replaceWith()代碼和檢查