使用 AJAX 進行分頁后，添加到購物車不起作用

Question

我在我的商店中使用 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 請求之間存在沖突，當我快速單擊它並多次單擊添加到購物車按鈕時，它有時會起作用，這真的很奇怪。

此外，當我在與第一個不同的頁面上時，它根本不起作用。

謝謝！

Answer 1

如果 AJAX 中的元素是.form-item ，則事件處理程序不會綁定到這些新元素，您需要通過文檔委托事件，更改：

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

到：

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