我已经阅读了一些有关我的问题的信息,但仍然没有得到正确的答案。我尝试了.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和属性,所有这些都在正确的位置。
您需要使用事件委托:-
因此更改::-
$('.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()代码并检查
replaceWith()