无法通过Jquery Ajax更新DOM元素内容

时间:2017-05-25 03:08:42

标签: jquery ajax

使用下面的JavaScript时,标识为#totalprice的元素不会第二次更新。

$('.spinner_btn').each(function () {
    $(this).on('click', function () {
        spinner = $(this).siblings(".custom_spinner").data('spinnerclass');
        $('.'+spinner).addClass('show');
        $(this).addClass('hide');
        $('.orderbox').addClass("open");
       // $(this).siblings('.custom_spinner').children('.input-group').children('.input-number').val(1);
        $.ajax({
            'type' : "POST",
            'url'  : 'menus/temp',
            'data' : {
                '_token' : $('input[name=_token]').val(),
                'menu_id' : $(this).siblings('.custom_spinner').children('.input-group').children('.menu_id').val(),
                'menu_name': $(this).siblings('.custom_spinner').children('.input-group').children('.menu_name').val(),
                'menu_price': $(this).siblings('.custom_spinner').children('.input-group').children('.menu_price').val(),
                'quantity' : $(this).siblings('.custom_spinner').children('.input-group').children('.input-number').val(),
            },
            success : function($data){
                alert($data.total);
                $('#totalprice').replaceWith($data.total);
                if($data.menus.edit == 'yes'){
                    if($data.quantity == 0){
                        $(".item" + $data.menus.id).replaceWith(
                            "<tr class='item" + $data.menus.id + "'><td>" + $data.menus.name + "</td><td>" +
                            $data.quantity + "</td><td>" + $data.quantity * $data.menus.price + "</td><td><span id='paddingcustom"
                             + "'><span class='glyphicon glyphicon-minus cancelbox"+ "'"+"data-menuid='"+ $data.menus.id + "'></span>" +" </span>"
                            +"</td><td></td></tr>"
                        );
                    }
                }else{
                    $('#vouchertbl').append("<tr class='item" + $data.menus.id + "'><td>" + $data.menus.name + "</td><td>" +
                        $data.quantity + "</td><td>" + $data.quantity * $data.menus.price + "</td><td><span id='paddingcustom"
                        + "'><span class='glyphicon glyphicon-minus cancelbox"+ "'"+"data-menuid='"+ $data.menus.id + "'></span>" +" </span>"
                        +"</td><td></td></tr>"
                    );
                }
            }
        });

    });
});

警告data.total显示正确的输出,但更新失败的id.I已经阅读了一些关于委托,但我是jquery的新手,不知道简单元素的语法。

1 个答案:

答案 0 :(得分:2)

我猜你要替换#totalprice元素,因为第二次没有工作 而不是

$('#totalprice').replaceWith($data.total); 

尝试

$('#totalprice').text($data.total);

参考这些replaceWith()&amp; text()