我已经阅读了一些关于我的问题,但仍然没有得到正确的答案。我试过.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和属性,所有内容都在正确的位置。
答案 0 :(得分: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()
代码并检查