AJAXで更新した後にJqueryのクリックが機能しない

Question

私の問題について読んだことがありますが、まだ正しい答えが得られていません。私はLonvelを使用しています。

@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のdoesntの仕事を使用して要素を更新。

最新のhtmlと属性を確認しましたが、すべて適切な場所にあります。あなたがEvent Delegation使用する必要が

Answer 1

： -

$('.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()コードとチェック