Question

好的..我有类似这样的设置：

<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'是否将其归因于这种情况还是错误的做法？

任何帮助将不胜感激！

Answer 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>

Answer 2

一些意见：

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

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

3）。由于您使用的是fancybox v1.3.4和inline内容，因此您需要注意 this 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

Fancybox 1.3.4内联按钮

2 个答案: