使用AJAX更新后，jQuery单击不起作用 [英] Jquery click doesn't work after updating with AJAX

问题描述

我已经阅读了一些有关我的问题的信息，但仍然没有得到正确的答案.我尝试使用.on()方法仍然无法正常工作.我正在使用Laravel.

I have read some about my problem and still don't get the right answer.I tried .on() method it still doesn't work.I am using 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无法工作时.

Everything work I want after loading the page but when I update the elements by using replaceWith() methods and then onclick doesnt work.

我检查了更新的html和属性，所有这些都在正确的位置.

I checked my updated html and attributes and all are in the right place.

推荐答案

您需要使用活动委托:-

因此更改::-

$('.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()代码并检查

Note:- now apply your replaceWith()code and check

这篇关于使用AJAX更新后，jQuery单击不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！