我在我的商店中使用 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 请求之间存在冲突,而且当我快速多次单击“添加到购物车”按钮时它有时会起作用,这真的很奇怪。
此外,当我位于与第一个页面不同的页面时,它根本不起作用。
谢谢!
最佳答案
如果 AJAX 处理的元素是 .form-item
,那么事件处理程序将不会绑定(bind)到这些新元素,您需要通过文档委托(delegate)事件,更改:
$(".form-item").submit(function(e) {
...
至:
$(document).on('submit', '.form-item', function(e) {
...
关于javascript - 使用 AJAX 实现分页后,添加到购物车不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48908084/