'keyup' 上的 jQuery 在 AJAX 请求后不再工作答案

【问题标题】：jQuery on 'keyup' no longer working after AJAX request'keyup' 上的 jQuery 在 AJAX 请求后不再工作
【发布时间】：2013-10-18 07:59:55
【问题描述】：

我有一个购物车应用程序，它将使用 AJAX 请求使用以下 updateCart() 函数“即时”更改页面上的购物车价格 - 它调用 render_cart() 函数来显示使用“keyup”事件的购物篮。

由于某种原因，它在初始按键时一切正常 - 但如果我尝试再次执行此操作，它不起作用，即使我可以在输入字段上看到 .cart-qty 类，任何人都可以建议为什么会这样正在发生吗？

// on keyup event call the update cart function
$(".cart-qty").on('keyup',function( e ) {    
    var qty = $(this).val(); // e.g '2' 
    var rowid = $(this).data("rowid"); // e.g 740fdjhirtj3swnjf463

    $( ".basket-item" ).remove();
    updateCart( qty, rowid );

} );

function updateCart( qty, rowid ){
$.ajax({
        type: "POST",
        url: "/cart/ajax_add_item",
        data: { rowid: rowid, qty: qty },
        dataType: 'json',
        success: function(data){                
            render_cart(data);
        }           
    });
}

function render_cart(json) {

total = json.total;
cart = json.contents;

var html = '';
if (cart) {
    $.each(cart, function (i, item) {
      html += '<div class="basket-item"><div class="col-sm-6 col-no-pad"><p><img class="img-responsive" src="'+ item.custom.image +'" alt="'+ item.name +'" /></p><div class="remove-item"><p><a class="btn btn-sm btn-yellow" href="#">Remove</a></p></div></div><div class="col-sm-6 col-no-pad"><p class="model"><span class="heading">Model:</span><br />'+ item.name +'<br />'+ item.options.attributes +'</p><p class="buyer"><span class="heading">Buyer:</span>'+ item.options.merchant +'</p><p class="price"><span class="heading">Price:</span>&#36;'+ item.subtotal.toFixed(2) +'</p><p class="condition"><span class="heading">Condition:</span>'+ item.options.condition +'</p><p class="quantity"><span class="heading">Quantity:</span><input type="text" class="form-control cart-qty" value="'+ item.qty +'" data-rowid="'+ item.rowid +'" /></p></div></div>';
    })
}   

$('#basket_start').after( html );
$('#total-value').text( total );
}

【问题讨论】：

标签： ajax json jquery onkeyup

【解决方案1】：

您需要使用事件委托 .on() 来动态添加像这样的元素

$(document).on('keyup','.cart-qty',function( e ) {

将其绑定到文档或最近的静态父级

【讨论】：

你是一个活生生的传奇！我刚刚发布完问题... +1 以供您快速回复（很快就会接受）
Thanx buddy..非常感谢您的帮助 :-)

【解决方案2】：

$('.cart-qty').on('keyup', (function(event) {
    //do code
}));

【讨论】：