2013-10-18 42 views
1

我有一個購物車應用程序,它將使用以下updateCart()函數使用AJAX請求即時更改頁面上的購物車價格 - 它調用render_cart()函數使用'keyup'事件顯示籃子中的每個項目。jQuery on'keyup'在AJAX請求後不再工作

由於某種原因,它在初始鍵盤按下時工作正常 - 但如果我嘗試再次執行此操作,它不起作用,即使我可以在輸入字段上看到.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); 
} 

回答

7

您需要使用事件代表團。對()用於動態添加元素這樣

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

將其綁定到文檔或最接近的靜態父

+1

你是一個活着的傳奇!我只是剛剛發佈的問題... +1爲您的快速反應(將很快接受) – Zabs

+0

Thanx哥們..真正感謝您的幫助:-) –

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