我有一个购物车，可以通过ajax调整或删除数量或购物车项目，因此页面不必刷新即可反映更改等。
我有一个外部shopping_cart.js来处理所有购物车js方面的事情。当我调整购物车项目数量时，我在 ajax 成功函数上使用 DOM innerHTML 来反映对用户的更改，但为了完全删除购物车项目，我使用 jquery load 函数将update_cart.php文件加载到容器div 元素中，当用户单击删除/添加/减去购物车项目时，该元素在鼠标悬停购物车快速链接中显示更新的购物车内容。
由于我使用 jquery.load 加载cart_update.php脚本，我必须在cart_update.php脚本中包含外部shopping_cart.js，以便在加载脚本时所有 JS 正常工作，但我遇到的问题是，当我将 js 文件包含在cart_update.php并使用 jquery 加载它时，当我单击任何添加/减去/删除每个产品的按钮，并在每次单击时复合每个循环。
例如，当我第一次单击添加数量时，购物车数量将添加一件额外的项目，当我再次单击时，它将循环浏览 2 个附加项目，然后是 4、8、16 等。但是，如果我将外部 js 文件放在主 php 页面文件中而不是放在 cart_update 脚本中，它在页面刷新后正常工作并且不会循环，尽管当我尝试删除购物车项目时，显然 javascript 不起作用 jquery.load，因为它无法访问 js 文件，因为它不包含在cart_update.php
我真的不确定我在这里哪里出错了。我只是一个新手程序员
cart_update.php
<!-- Display cart contents -->
<script src="js/shopping_cart.js"></script>
<?php
// Call session start when the script is loaded via jquery.load
if (isset($_SESSION)){
} else {
session_start();
}
require_once "config.php";
$session_id = session_id();
$sql = "SELECT * FROM shopping_cart WHERE session_id='$session_id'";
$stmt = $PDOconnection->prepare($sql);
$stmt->execute();
$rowCount = $stmt->rowCount();
if($rowCount < 1 ){
echo "Your cart is empty.";
} else {
$points = 0;
while($result = $stmt->fetch(PDO::FETCH_ASSOC)){
$ui = $result['ui'];
$item_points = $result['item_points'];
// Display cart item name, price, quantity and amount of points earned
echo "<br>" . $result['item_name'] . " $" . number_format($result['item_price'],2) . " Qty: " . $result['item_quantity'] . " <a href='#' class='remove_item' data-ui='$ui'> X </a><br>";
$points = $points + number_format($item_points, 1);
}
echo "<hr />";
if (isset($_SESSION['user_name'])){
echo "You have earned $points points with this purchase!";
} else {
echo "Sign up to recieve $points points with this purchase! <a href'#'>What's this?</a>";
}
echo "<hr />";
echo "<a href='cart.php'>Check Out</a>";
}
?>
shopping_cart.js
function cart_data(cartData) {
// Get data values
var $item_stock_type = cartData.getAttribute('data-stock-type');
var $item_ui = cartData.getAttribute('data-stock-ui');
// Set value as one. As it's signle qty when adding to cart from the product list
var $item_qty = 1;
$(document).ready(function(e){
// Send data for processing in shopping_cart.php
$.ajax({
url: "php/shopping_cart.php",
data: { item_stock_type: $item_stock_type, item_ui: $item_ui, item_qty: $item_qty },
dataType: "json",
type: "post",
success: function(data, response){
document.getElementById("cart_total").innerHTML = data.cart_total;
document.getElementById("shoppingcart_link_quantity").innerHTML = data.cart_qty + '<br />';
switch (data.success)
{
case 0:
modal({
type: 'error',
title: 'Ooops',
text: data.error_message,
center: true,
animate: true,
});
break;
case 1:
modal({
type: 'alert',
title: '',
text: data.user_message,
center: true,
animate: true,
autoclose: true,
});
break;
case 2:
modal({
type: 'alert',
title: '',
text: data.user_message,
center: true,
animate: true,
});
break;
}
// Update Shopping cart contents
$("#shopping_cart_container").load("php/update_cart.php");
},
error: function(jqXHR, status, error){
var $jxr = jqXHR;
var $status = status;
var $error = error;
// Display error message to user
modal({
type: 'error',
title: 'Ooops!',
text: 'An Error has occured: <br><br>' + jqXHR + ": " + status + "; " + error,
center: true,
animate: true,
});
// Log error message
}
});
});
}
// Remove item from shopping cart quick link
$(document).ready( function(){
// Remove item from cart
$(".remove_item").click( function(e){
e.preventDefault();
var $ui = $(this).attr("data-ui");
$.ajax({
url: 'php/ajax.php',
data: { remove_cart_item: $ui },
dataType: "json",
type: "post",
success: function(data, response){
document.getElementById("cart_total").innerHTML = data.cart_total;
document.getElementById("shoppingcart_link_quantity").innerHTML = data.cart_qty + '<br />';
switch (data.success)
{
case 0:
modal({
type: 'error',
title: 'Ooops',
text: data.error_message,
center: true,
animate: true,
});
}
// Update Shopping cart quick link contents
$("#shopping_cart_container").load("php/update_cart.php");
},
error: function(jqXHR, status, error){
var $jxr = jqXHR;
var $status = status;
var $error = error;
// Display error message to user
modal({
type: 'error',
title: 'Ooops!',
text: 'An Error has occured: <br><br>' + jqXHR + ": " + status + "; " + error,
center: true,
animate: true,
});
// Log error message
}
});
});
});
// Add qty to shopping cart main page
$(document).ready( function(){
$(".add_item").click( function(e){
e.preventDefault();
var $ui = $(this).attr("data-ui");
$.ajax({
url: 'php/ajax.php',
data: { add_cart_item: $ui },
dataType: "json",
type: "post",
success: function(data, response){
switch (data.success)
{
case 0:
// No more stock. Notify user
modal({
type: 'error',
title: 'Sorry',
text: data.error_message,
center: true,
animate: true,
});
break;
case 1:
// Update item qty
var $id = data.element_id;
document.getElementById("cart_total").innerHTML = data.cart_total;
document.getElementById("shoppingcart_link_quantity").innerHTML = data.cart_qty + '<br />';
document.getElementById($id).innerHTML = data.item_qty;
// Update Shopping cart quick link contents
$("#shopping_cart_container").load("php/update_cart.php");
break;
}
},
error: function(jqXHR, status, error){
var $jxr = jqXHR;
var $status = status;
var $error = error;
// Display error message to user
modal({
type: 'error',
title: 'Ooops!',
text: 'An Error has occured: <br><br>' + jqXHR + ": " + status + "; " + error,
center: true,
animate: true,
});
// Log error message
}
});
});
});
// Minus qty to shopping cart main page
$(document).ready( function(){
$(".minus_item").click( function(e){
e.preventDefault();
var $ui = $(this).attr("data-ui");
$.ajax({
url: 'php/ajax.php',
data: { minus_cart_item: $ui },
dataType: "json",
type: "post",
success: function(data, response){
switch (data.success)
{
case 0:
break;
case 1:
// Update item qty
var $id = data.element_id;
document.getElementById("cart_total").innerHTML = data.cart_total;
document.getElementById("shoppingcart_link_quantity").innerHTML = data.cart_qty + '<br />';
document.getElementById($id).innerHTML = data.item_qty;
// Update Shopping cart quick link contents
$("#shopping_cart_container").load("php/update_cart.php");
break;
}
},
error: function(jqXHR, status, error){
var $jxr = jqXHR;
var $status = status;
var $error = error;
// Display error message to user
modal({
type: 'error',
title: 'Ooops!',
text: 'An Error has occured: <br><br>' + jqXHR + ": " + status + "; " + error,
center: true,
animate: true,
});
// Log error message
}
});
});
});
您将事件侦听器附加到 dom 元素，当您用 load 覆盖它们时，这些元素会被删除。
若要修复，请使用事件委派附加到不会被删除的父元素。
例如，替换：
$(".remove_item").click( function(e){...
跟：
$("#shopping_cart_container").on('click','.remove_item', function(e){...
更多信息： http://api.jquery.com/on/
-
只将你的javascript添加到页面一次，不要在每个ajax响应时发送它。这样，您就不会将多个事件处理程序附加到添加按钮。
-
在脚本中更改将删除项处理程序添加到
$(document).on ("click", ".minus_item", function(e){...})的方式，否则每次从 ajax 响应替换篮子内容时都会丢失事件处理程序。
每次定义cart_data函数时，您最终都会在相同的元素上发生多个事件。一种解决方案是简单地重新分配它(如果存在(。
所以取而代之的是这个
function cart_data(cartData) {
...
}
你可以这样做
var cart_data = cart_data || function(cartData) {
...
}