如何使用on.()绑定jquery ajax返回的html

How to bind jquery ajax returned html using on.()

本文关键字:ajax 返回 html jquery 绑定 何使用 on      更新时间:2023-09-26

我知道有人问过这个问题,但我不知道如何在我的用例中正确地实现它。

结束游戏是当一个项目被添加到购物车通过点击项目添加按钮,它触发和ajax调用传递项目id到一个php函数,将其添加到购物车会话(这工作得很好)。

在ajax调用成功时,它调用update_cart()函数,该函数构建新的购物车html并返回它。保存购物车html的div的内容被新的购物车html内容(商品数量价格行项目)所替换。这部分也很好。

新的购物车内容行项目包括名称、在输入中显示的数量和价格。

新创建的行项数量输入没有响应onblur动作(我认为),因为它没有绑定到任何东西,因为它在页面加载时不存在。

可以一些了不起的绅士(或女人)和学者帮助我理解如何绑定新的输入,这样我就可以调用ajax函数来更新项目数量时,字段模糊?

我JS

$(document).ready(function () {
function update_cart() {
    var dataString = "";
    //alert (dataString);return false;
    $.ajax({
        type: "POST",
        dataType: "html",
        data: dataString,
        url: "/actions/updatecart.action.php",
        beforeSend: function() {
            $('#loader').show();
        },
        complete: function() {
            $('#loader').hide();
        },
        success: function(data) {
            $('#cart-items').hide().html(data).fadeIn( "slow");
        },
        error: function(data){
            $('#msg').hide().html("<div class='col-md-8'><div class='alert alert-danger alert-dismissable'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>Error Updating Cart</div>").slideDown( "fast");
        }
    });
};

$(function() {
    $("button[id^=add]").on("click", function(){
        var id = $( this ).data('id');
        var dataString = 'id='+ id;
         /* alert (dataString);return false; */
        $.ajax({
            type: "POST",
            dataType: "html",
            data: dataString,
            url: "/actions/add.action.php",
            beforeSend: function() {
                $('#loader').show();
            },
            complete: function() {
                $('#loader').hide();
            },
            success: update_cart ,
            error: function(data){
              //  $('#msg').hide().html("<div class='col-md-8'><div class='alert alert-danger alert-dismissable'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>Error Adding Item</div>").slideDown( "fast");
            }
        });
        return false;
    });
});
$(function() {
    $("input[id^=lineitem]").on("blur", function(){
        var id = $( this ).data('id');
        var qty = $( this ).val();
        var dataString = 'id='+ id + '&qty=' + qty;
        alert (dataString);return false;
        $.ajax({
            type: "POST",
            dataType: "html",
            data: dataString,
            url: "/actions/add.action.php",
            beforeSend: function() {
                $('#loader').show();
            },
            complete: function() {
                $('#loader').hide();
            },
            success: update_cart ,
            error: function(data){
                //  $('#msg').hide().html("<div class='col-md-8'><div class='alert alert-danger alert-dismissable'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>Error Updating Quanity</div>").slideDown( "fast");
            }
        });
        return false;
    });
  });
});

我的返回的html和php foreach创建它

foreach($_SESSION['basket']['items'] as $item){ ?>
<div class="cart-item">
    <div class="col-lg-8 col-md-8 np item"><?php echo $item['name']; ?></div>
    <div class="col-lg-2 col-md-2 np"><div class="input-group"><input data-id="<?php echo $item['id']; ?>" id="lineitem-<?php echo $item['id']; ?>" value="<?php echo $item['count']; ?>" type="text" class="form-control"></div></div>
    <div class="col-lg-2 col-md-2 np price"><?php echo $item['price']; ?></div>
</div>
<?php  } ?>

感谢任何可以帮助我弄清楚如何做这件事的人。到目前为止,一切都很顺利。

我想这就是你想要的:

...success: function(data) {
    $('#cart-items').hide().html(data).fadeIn( "slow");
    $(".cart-item .input-group input").bind("change",...function);

或$("。购物车-item - input-group - input).on("change",…function);或$("。

}...