lightbox_me 无法处理点击事件答案

【问题标题】：lightbox_me not working on click eventlightbox_me 无法处理点击事件
【发布时间】：2013-10-09 07:24:09
【问题描述】：

我对此很陌生，因此请提前为冒犯/惹恼任何人道歉。

我已经建立了我的第一个网站 (http://www.goodgollyexeter.co.uk)。我的网站上有一个购物车（我使用的 Plum shop 很好用）。我希望用户能够单击“查看购物车”按钮（位于具有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 停止工作，这真的很烦人，好像我删除了查看购物车按钮单击事件编码，所以它看起来像这样：

<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 从“查看购物车”按钮单击事件中工作，我将非常感激。请让我知道我是否可以更好地解释或发布更多代码或其他任何内容以提供更好的帮助。谢谢亚历克斯

【问题讨论】：

尝试将您的脚本放入$( document ).ready() 以等待DOM 准备就绪(learn.jquery.com/using-jquery-core/document-ready)
H Fab Sa，感谢您的快速回复。我已经尝试了以下代码，但仍然没有乐趣：

标签： javascript jquery html

【解决方案1】：

检查您的最后一个关闭按钮标签以进行结帐：

<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

【讨论】：

嗨达斯乔恩，感谢您的意见。你是对的，它应该用关闭 - 我已经相应地改变了。尽管如此，lightbox_me 仍然没有乐趣。我只是不明白为什么它可以自己工作，但是一旦我将它放入点击事件中，它就会完全停止工作。任何建议将不胜感激。
1.功能是否在所有浏览器中都失败？
2.尝试像我上面显示的那样包装您的 jQuery - 可能与您正在导入的其他客户端脚本发生冲突。
3.从您发布的网站看起来，您正在尝试加载 jquery.js 库两次，一次是在上面列出的自定义 jquery 之前，一次是之后。