无法在也具有 .toggle() 函数的元素上触发 FancyBox

Question

我有一个奇怪的问题，我似乎无法弄清楚。我尝试在 SO 和其他网站上搜索，但我似乎无法解决这个愚蠢的问题。

这是我的问题 - 我正在使用 FancyBox 通过 AJAX 加载一些页面。我的那个工作得很好。

我还有一些元素使用 .toggle(); 将其类更改为“active”以更改样式。

两者单独工作都很好。问题是我有一个标志图标，它应该加载 FancyBox 实例，同时它需要向图标添加一个“active”类。这个想法是，一旦保存表单，就会应用一个标志，并且用户知道有一个与该数据位关联的标志。

这是我的 JS 代码：

            $('.activate').toggle(function() {
                 $(this).addClass('active');
            }, function() {
                 $(this).removeClass('active');
            });

            $('.activate.active').toggle(function() {
                 $(this).removeClass('active');
            }, function() {
                 $(this).addClass('active');
            });

            $('.popup').fancybox({
                 autoDimensions: true,
                 modal: true
            });

您看到的是两个单独的函数，用于打开/关闭类（某些元素将加载为活动元素，这就是为什么有两个函数）。

这是我的 HTML：

<a class="activate popup fancybox.ajax icon flag" href="flag-rock.aspx">text</a>

“active”类加载切换功能，“popup”类应该加载 FancyBox 功能，“fancybox.ajax”告诉 FancyBox 通过 AJAX 加载内容。 “图标”和“旗帜”只是简单地设置锚点的样式。

所以，这是我的交易。如果我删除“活动”FancyBox 有效，否则，我会切换该类，但不会触发 FancyBox。我在 firebug 或 Chrome 的开发工具中也没有收到任何错误。

我什至尝试了这样的事情：

            $('.activate').toggle(function() {
                $(this).fancybox({
                    autoDimensions: true,
                    modal: true
                }).addClass('active');
            }, function() {
                $(this).removeClass('active');
            });

发生的情况是图标将获得活动类，但不会触发 FancyBox。如果我再次单击它，它确实会触发 FancyBox，但只有在单击该元素两次之后才会触发。

您可以在此处查看该页面： http://ec2-50-16-99-3.compute-1.amazonaws.com/aptify/rocks/global-rocks.aspx 单击右侧的“标志”图标数据行。

有什么想法吗？

解决方案

好的，感谢下面每个人的帮助，这是适合我的解决方案。

jQuery:

        $('.popup, .active').fancybox({
                autoDimensions: true,
                modal: true
            });

            $('.activate').click(function()
            {
                $(this).toggleClass('active off');
                event.preventDefault()
            });

HTML:

Stuck Rock''

preventDefault( ) 当该标志未打开时，超链接将无法工作。否则，您将在窗口内获得传统的页面加载，这不是我们想要的。

可能有更好的方法来做到这一点，但这就是我知道如何解决打开标志时页面加载问题的全部方法。

Answer 1

我认为你应该只在 doc.ready 中应用一次 fancybox

另外，你应该查看 http://api.jquery .com/toggleClass/ 用于您的班级切换。

但我认为您真正需要的是 onStart 和 onClosed 事件来切换您的标志。这样，当页面在花式框中打开时，您的标志就会处于活动状态。

尝试这样的事情：

    $(function(){
          $('#fancything').fancybox({
               autoDimensions: true,
               modal: true
          });
          $('.activate').click(function(){
                $(this).addClass('active').removeClass('popup fancybox.ajax')
          });
    });

Answer 2

如何在 click 事件处理程序之前设置 fancybox-up 以便在第一次单击时做好准备？您在第一次单击时设置 fancybox，以便在第二次单击时准备就绪，只需在绑定 click 的同时在元素上运行 fancybox 插件即可通过 .toggle() 的事件处理程序：

        $('.activate').fancybox({
            autoDimensions: true,
            modal: true
        }).toggle(function() {
            $(this).addClass('active');
        }, function() {
            $(this).removeClass('active');
        });

我刚刚对此进行了测试，当我在页面上运行此代码时，它会在第一次单击标志图标时显示弹出窗口。