1

好的..我有类似这个设置的东西：

<button id="buynow" disabled>Add to Cart</button>

<div style="display:none">
    <div id="purchase_popup">
        Content within here
    </div>
</div>

然后我的fancybox代码是这样的：

<link rel="stylesheet" type="text/css" href="includes/js/jquery.fancybox-1.3.1.css" />
<script type="text/javascript" src="includes/js/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript">
    $("#buynow").fancybox({
        'href'              : '#purchase_popup',
        'transitionIn'      : 'fade',
        'transitionOut'     : 'fade',
        'titleShow'         : false
    });
</script>

但是由于一些奇怪的原因，当我单击buynow 按钮时，我的purchase_popup div 不会弹出。我已经禁用了它，所以它不会导致不同的页面，因为这是我刚刚参与的这个项目中的当前操作。我不知道fancybox中的'href'是否将其归因于它，或者这是否是错误的做法？

任何帮助，将不胜感激！

4

2 回答 2

1 
Disabled elements don't fire mouse events. Most browsers will propagate an event 
originating from the disabled element up the DOM tree, so event handlers 
could be placed on container elements.

Firefox，也许还有其他浏览器，禁用表单字段上的 DOM 事件。
从禁用的表单字段开始的任何事件都将被完全取消，并且不会向上传播 DOM 树。如果单击禁用按钮，则事件源为禁用按钮，单击事件完全消失。
浏览器实际上不知道按钮被点击，也不会传递点击事件。就好像你在点击网页上的一个黑洞。

因此，您将不得不删除按钮的禁用属性，或者另一种解决方法是，您可以放置​​外部容器，您可以在其上点击类似这样的内容：

<div style="display:inline-block; position:relative;">
  <button id="buynow" disabled>Add to Cart</button>
</div>​
于 2013-05-16T17:48:58.130 回答
1

一些评论：

1）。如果您button是disabled，则无法在 a 之后触发操作click。

2）。您需要将您的 fancybox 脚本包装在该.ready()方法中。

3）。由于您使用的是 fancybox v1.3.4 和inline内容，因此您需要了解此 BUG和解决方法。

所以你可以使用这个代码：

$(document).ready(function () {
    $("#buynow").fancybox({
        'href': '#purchase_popup',
        'transitionIn': 'fade',
        'transitionOut': 'fade',
        'titleShow': false,
        // fix for inline nested DIVs
        'onCleanup': function () {
            var myContent = this.href;
            $(myContent).unwrap();
        }
    })
}); // ready

见JSFIDDLE

于 2013-05-16T18:17:20.920 回答