带有触发器点击的fancybox bug [英] fancybox bug with trigger click

问题描述

我必须在我的网站上使用触发点击运行fancybox，我发现的问题是使用此方法如果您点击花式框内的元素，花式框将关闭并再次出现（闪烁）。

I have to run fancybox with trigger click in my website, the problem that i discovered is that with this method if you click on elements inside the fancy box, the fancy box will close and appear again (blinks) .

我希望fancybox在我点击框内的元素时防止闪烁当我点击这些元素时我不想看到任何变化，那就是：）

我为这个问题创建了演示

i created demo for this problem

http://jsfiddle.net/NhWLc/5/

<div id="a1">
  <p>Click on the box</p>
  <div class="r"></div>
</div>

$(document).ready(function() {
  $('#a1').fancybox({   
    afterClose: function() {
      console.log('closed :( ');
    }
  }).click();// or .trigger('click');
});

任何想法？

推荐答案

您的代码的问题在于您使选择器＃a1 同时充当：触发器和目标 fancybox因此任何点击本身都会一遍又一遍地发射fancybox。

The problem with your code is that you are making the selector #a1 to act as both : the trigger and the target of fancybox therefore any click on itself will fire fancybox over and over again.

你需要创建另一个以＃a1 元素如

You would need to create another selector (the trigger) that targets the #a1 element like

<a class="fancybox" href="#a1">triggers fancybox</a>
<div id="a1">
  <p>Click on the box</p>
  <div class="r"></div>
</div>

如果你不这样做希望元素 .fancybox 可见，只需添加 di splay：none property

if you don't want the element .fancybox be visible, just add a display:none property

然后你的js

$(document).ready(function () {
    $('.fancybox').fancybox({
        afterClose: function () {
            console.log('closed :( ');
        }
    }).trigger('click');
});

参见 JSFIDDLE

See JSFIDDLE

编辑：看着你的样本 JSFIDDLE ，事情本来可以简单得多。

EDIT : looking at you sample JSFIDDLE, things could have been much simpler.

只有这个html

<div id="a1">
  <p>Click on the box</p>
  <div class="r"></div>
</div>

您可以使用此代码

$(document).ready(function () {
    $.fancybox({
        href: "#a1"
    });
});

其中不需要点击。

见到你更新 JSFIDDLE

See you updated JSFIDDLE

这篇关于带有触发器点击的fancybox bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！