lightbox_me无法处理点击事件

时间:2013-10-02 19:10:02

标签: javascript jquery html

我对此非常陌生,所以提前道歉,因为有人冒犯/惹恼了任何人。

我已经建立了我的第一个网站(http://www.goodgollyexeter.co.uk)。我的网站上有一个购物车(我正在使用Plum商店,效果很好)。我希望用户能够点击“查看购物车”按钮(在网站的右上角有id="viewcart"),然后将其购物车的内容显示在灯箱样式窗口中。他们购物车的内容包含在<div>id="cart_holder"

为了尝试实现上述目标,我使用的是lightbox_me,但我无法通过“查看购物车”按钮点击事件来解决问题。如果我删除按钮单击事件编码然后lightbox_me工作并显示购物车的内容,但由于没有事件触发它,它会在页面加载后立即打开。现在我已经删除了按钮点击事件编码,所以如果你要访问网站,你应该看到lightbox_me工作(但是在页面加载而不是按钮点击事件)。

我试图挑选相关代码并在下面显示。这是我尝试使用lightbox_me来处理“查看购物车”按钮点击事件(改编自lightbox_me网站示例)的代码,但这不起作用:

<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.lightbox_me.js"></script>
</head>
<body>

<button id="viewcart" class="viewcart">View Cart</button>

<div id="cart_holder">
<h1> Your Cart </h1>
<p>Currently your cart contains the following items:</p>
<div id="cart"></div>
<label>Items:</label> <span class="cart-quantity">0</span><br>
<label>Sub-Total:</label> <span class="cart-subtotal">£0.00</span><br>
<label>Shipping:</label> <span class="cart-shipping">£0.00</span><br>
<label>Total:</label> <span class="cart-total">£0.00</span><br>
<br>
Please click below to pay using a credit or debit card or via Paypal:
<br>
<br>
<button class="paypal">Checkout</input>
</div>

<script>
$("#viewcart").click(function() {
$("#cart_holder").lightbox_me();
});
</script>

</body>

当我添加上面的代码时,lightbox_me停止工作,这真的很烦人,好像我删除了View Cart按钮点击事件编码,所以它读起来像这样:

<script>
$("#cart_holder").lightbox_me();
</script>

然后lightbox_me工作(但仅限于页面加载而不是按钮单击事件)。

我不知道它是否有用但是当我检查Chrome中的<div id="cart_holder">元素时,我确实注意到以下错误消息:

Uncaught TypeError: Object [object Object] has no method 'lightbox_me' 

由于我的无知,我担心这对我来说意义不大。如果有人能告诉我我做错了什么以及如何通过“查看购物车”按钮点击事件让lightbox_me工作,我会非常感激。如果我能更好地解释或发布更多代码或其他任何内容以便更好地帮助,请告诉我。谢谢Alex

1 个答案:

答案 0 :(得分:0)

检查结帐的最后一个结束按钮标记:

<button class="paypal">Checkout</input>  <!-- should this close with button and not input? -->

你可以像这样包装你的jquery吗?

;(function($){  // add 

    $(document).ready(function(){

        $("#viewcart").button().click(function() {
            $("#cart_holder").lightbox_me();        
        });

    });

})(jQuery);  // add