2015-01-10 82 views
0

我在一个电子商务网站,在产品列表网页时,在加入购物车按钮,用户点击 产品将被添加到购物车,我们展示了弹出框工作说该产品添加...我们使用插件显示弹出框和弹出数据来自ajax和Java控制器。当整个页面加载成功时,它工作得很好。如果用户点击添加购物车,而页面加载显示简单的AJAX结果,而不是弹出,因为在页面加载期间,插件使用弹出窗口不可用。我们尝试禁用添加购物车按钮,直到页面加载,但客户对此方法不满意。捕获点击事件发生后的页面加载和触发DOM准备

代码:

<--!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事件,如果用户已经点击。请给我建议任何其他解决方案来正确显示弹出窗口

感谢提前:)

+0

听起来像你应该工作在更快的页面加载? – adeneo

+0

它的正常工作更快的上网速度,但用户希望它也对工作很慢的连接:) – ggbhat

回答

0

你的选择是不使用内联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文件提供?无论如何要最小化它(只有生产版本)?

+0

感谢会尝试这 – ggbhat

相关问题