我在商店中使用AJAX时遇到问题。

我刚刚实现了分页(也使用AJAX),并且添加到购物车不再起作用。

真的很奇怪,好像我将两次单击“添加到购物车”而且非常快,在某些情况下它可以工作。

这是添加到购物车功能:

$(".form-item").submit(function(e){
  var form_data = $(this).serialize();
  var button_content = $(this).find('button[type=submit]');
  button_content.html('Adaugare...'); //Loading button text
  $.ajax({ //make ajax request to cart_process.php
    url: "cart_process.php",
    type: "POST",
    dataType:"json", //expect json value from server
    data: form_data
  }).done(function(data){ //on Ajax success
    $("#cart-info").html(data.items); //total items in cart-info element
    button_content.html('Cumpara'); //reset button text to original text
    $(".cart-box").trigger( "click" ); //trigger click to update the cart box.
  })
  e.preventDefault();
});


这是分页中的功能之一:

function getresult(url) {
$.ajax({
  url: url,
  type: "POST",
  data:  {rowcount:$("#rowcount").val(),name:$("#name").val(),code:$("#code").val()},
  success: function(data){ $("#toys-grid").html(data);}
   });
}
getresult("live_getresult.php");


我认为这两个AJAX请求之间存在冲突,当我快速单击它并多次单击“添加到购物车”按钮时,它有时可以工作确实很奇怪。

另外,当我在与第一个页面不同的页面上时,它根本不起作用。

谢谢!

最佳答案

如果AJAXed的元素是.form-item,那么事件处理程序将不会绑定到那些新元素,则需要通过文档委派事件,更改:

$(".form-item").submit(function(e) {
...


至:

$(document).on('submit', '.form-item', function(e) {
...

08-04 13:01