在页面加载之前捕获点击事件，并在DOM准备就绪后触发

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事件绑定到提交表单，这样click事件仅在加载JS后才有意义。 对于您的HTML，删除内联JS：

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

相反，请使用JS监听Submit事件：

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

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

另外，您可能希望查看网站加载速度如此之慢（或至少是JS）的原因。 您是否将其作为压缩文件提供？ 无论如何，有没有将其最小化（仅生产版本）？