Question

当我在用户点击添加购物车按钮时，我正在产品列表页面上的电子商务网站上工作产品将被添加到购物车，我们正在显示一个弹出框，说产品已添加...我们使用插件显示弹出框，弹出的数据来自ajax和java控制器。整个页面加载成功后，它运行良好。如果用户点击添加购物车，而页面加载其显示简单的ajax结果而不是弹出，因为在页面加载期间插件使用弹出窗口不可用。我们尝试禁用“添加购物车”按钮直到页面加载，但客户对此方法不满意。

代码：

<--!form for add to cart-->
 <form submit="addcart()">
  <input type="button">Add Cart</button>
 </form>

 //JS for show popup and save form data
 saveform:function{
 }

 displayPopup:function{
 }

 productadd:function{
   saveform();
   displayPopup();
 }

$(document).ready(function(){
   productadd();
 }

是否有任何解决方法可以在页面加载期间捕获click事件，并在用户已经单击时自动触发特定按钮的click事件。请建议我正确显示弹出窗口的任何其他解决方案。

提前致谢：）

Answer 1

您的选择不是使用内联JS，现在无论如何都不推荐使用。在这种情况下，如果尚未下载和解析JS文件，则可能会调用addcart()函数。

解决方案是在DOM准备就绪时使用JS将click事件绑定到提交表单，这样只有在加载JS后，click事件才有意义。对于HTML，删除内联JS：

<form>
    <input type="button">Add Cart</button>
</form>

相反，使用JS收听提交事件：

$(document).ready(function(){
    productadd();

    $('form').submit(function() {
        addcart();
    });
});

此外，您可能希望查看网站加载速度如此之慢的原因（或至少是JS）。你是作为一个gzip文件服务吗？无论如何最小化它（只有生产版本）？

在页面加载之前捕获单击事件并在DOM准备好之后触发

1 个答案: