jQuery在Safari及Mac版Chrome中失效问题求助

嘿，我看了你的问题和代码，发现几个很可能导致Safari/Mac Chrome失效的关键点，给你梳理下：

1. 重复绑定的点击事件直接打断AJAX流程 #

你给.add_to_cart按钮绑定了两次点击事件：

• 第一次发起AJAX请求，在success回调里更新购物车；
• 第二次直接调用location.reload()，这会让浏览器还没等AJAX请求完成就强制刷新页面。

不同浏览器的事件队列处理顺序有差异，Windows Chrome可能刚好在刷新前跑完了AJAX的success逻辑，但Mac的Chrome/Safari没来得及执行更新，就直接刷新了，看起来像是购物车没变化。

2. AJAX参数里的语法错误（Safari的致命伤） #

在AJAX的data对象里，最后一个键值对后面多了个逗号：

data:{ 
  product_id:product_id,
  product_name:product_name,
  product_price:product_price,
  product_image:product_image,
  product_quantity:product_quantity, // 这里的多余逗号！
},

旧版Safari（甚至部分现代浏览器）对对象字面量末尾的逗号解析会直接报错，导致整个JS代码停摆，这大概率是jQuery在Safari里完全失效的核心原因。

3. 重复定时器导致的资源浪费与冲突 #

你同时设置了3个定时器（两个500ms、一个1000ms）来加载购物车内容，重复的请求不仅浪费资源，还可能导致DOM更新冲突，加重浏览器处理负担。

修复后的代码示例 #

我把这些问题都修正了，还加了错误处理方便排查：

<script type="text/javascript"> 
$(document).ready(function(){
  // 只绑定一次点击事件，确保流程连贯
  $('.add_to_cart').click(function(){ 
    var product_id = $(this).attr("id"); 
    var product_name = $('#name'+product_id).val(); 
    var product_price = $('#price'+product_id).val(); 
    var product_image = $('#image'+product_id).val(); 
    var product_quantity = $('#quantity'+product_id).val(); 

    $.ajax({ 
      url: "includes/add_to_cart.php", 
      method: "POST", 
      data: { 
        product_id: product_id,
        product_name: product_name,
        product_price: product_price,
        product_image: product_image,
        product_quantity: product_quantity // 去掉末尾多余逗号
      }, 
      success: function(value) { 
        swal("Success!", "Product added into cart!", "success"); 
        // AJAX成功后手动触发购物车更新，无需等待定时器
        var quantity_id = $('#quantity_id').val(); 
        $('.quantity123').load("includes/fetch_quantity.php?id=" + quantity_id).fadeIn("slow");
        $('.popupcart, .cart_products').load("includes/fetch.php").fadeIn("slow");
        
        // 如果确实需要刷新页面，放在这里确保AJAX完成后执行
        // location.reload();
      },
      error: function(xhr, status, error) {
        // 新增错误日志，方便排查问题
        console.error("AJAX请求失败:", error);
        swal("Error!", "Failed to add product to cart.", "error");
      }
    }); 
  }); 

  // 合并所有定时器，统一更新购物车内容
  setInterval(function(){ 
    var quantity_id = $('#quantity_id').val(); 
    $('.quantity123').load("includes/fetch_quantity.php?id=" + quantity_id).fadeIn("slow");
    $('.popupcart, .cart_products').load("includes/fetch.php").fadeIn("slow");
  }, 1000); 
}); 
</script>

额外排查建议 #

• 打开Safari的开发者工具（偏好设置→高级→勾选「在菜单栏中显示开发菜单」），查看控制台的JS报错信息，这是跨浏览器问题排查的核心手段；
• 确认你使用的jQuery版本是否支持当前的Mac浏览器版本，建议升级到最新的稳定版（比如3.x系列），旧版本（1.x）可能对现代Safari支持不佳；
• 测试add_to_cart.php的响应是否正常，可以直接在浏览器里访问该文件，或者在开发者工具的网络面板查看请求返回内容。

内容的提问来源于stack exchange，提问作者Engr Atiq