jQuery Fancybox 触发的点击事件只能工作一次

Question

我正在从绑定到表行的单击事件中调用jquery.fancybox链接。第一次操作正常，但是，如果我关闭fancybox并再次单击任何行，则绑定到该行的匿名函数仍会触发，但fancybox不会启动。 这是我使用的javascript：

$jq(document).ready(function() {

  $jq('a.edit').fancybox({
    'overlayShow': true,
    'hideOnContentClick': false
  });

  $jq('tr').click(function() {
    alert("clicked");
    $jq(this).find('a.edit').trigger("click");
  });

});

那么，在HTML中我有被分类为“edit”的锚点：

<tr>
  <td>...</td>
  <td>
    <a href="/candidates/22/qualifications/16/edit" class="edit">edit</a>
  </td>
</tr>

我总是能看到警告框，我可以更改触发/click（）调用为remove（），然后它就会"起作用"，在多个场合删除锚点。我也可以重复手动点击$('.edit')链接本身，一切正常。

那么，当从行点击事件依次进入时，为什么锚点点击事件只触发一次？这与我描述函数时所做的$(this)调用有关吗？

- user247534

---

也许在第二次执行中它只是找不到'a.edit'？你尝试输出$jq(this).find('a.edit').length了吗？ - naivists

Answer 1

试试这个：

尝试一下：

$jq('a.edit').live('click',function(){
    $.fancybox('<div>Here is the content</div>'{
        overlayShow: true,
        hideOnContentClick: false
    });

    return false;
});

或者你可以这样做：

 $jq('a.edit').live('click',function(){
    $.fancybox({
        href: 'some-page.html'
        overlayShow: true,
        hideOnContentClick: false
    });

    return false;
});

希望这能有所帮助！

- DropTheNerd

Answer 2

Tuffkid已经解决了; 我也在研究如何解决这个问题，最终得出了与他一样的结论，只是分享一下而已。

页面加载时：

$(document).ready(function(){
    $('#show').click(function(e){
        showPopUp($(this));
    });
});

JS 函数：

function showPopUp(obj){
    obj.fancybox({      
        'href' : 'page.php',
        'onCleanup': function(){
             $(this).click(function(e) { showPopUp($(this)); });
    }
            });
}

- rynkadink

Answer 3

我添加了

elem.removeData( "fancybox" ); 

之后

.trigger('click');

这对我有用。

- Arpan Das

Answer 4

尝试使用这个来调试

$jq('tr').click(function() {
    // Step 1: make sure the following expression is actually returning elements
    var elements = $jq(this).find('a.edit');

    if ( elements.length ) {
        // Step 2: Just use the `click` method to trigger the event
        alert("Found " + elements.length + "elements");
        elements.click();
    } else {
        alert("No elements found");
    }
});

如果一切正常，那么你可以将其简化为：

$jq('tr').click(function() {
    $jq(this).find('a.edit').click();
});

- Justin Johnson

---

谢谢您的建议。我运行了您发布的脚本，但是相同的行为仍然存在。每次单击后都会弹出警告：“找到1个元素”。但是无论我单击哪个<tr>，它只会在第一次单击时触发fancybox；此后只显示调试对话框。这对我来说很神秘，因为我可以随意单击锚点，并且每次都能正常工作。（但是我的目标是使锚点不可见，并从行onclick中触发单击事件。）fancybox对这些锚点的单击事件做了什么？ - user247534

我不熟悉fancybox插件。 - Justin Johnson

Answer 5

你解决了这个问题吗？如果没有，有一个巧妙的方法可以解决。我认为当你打开并关闭盒子时，'trigger()'方法会被解除绑定。我在每次点击事件中添加了隐藏元素：

function openPopup(url) {
    $("body")
    .append("<a style='display:none'></a>")
    .fancybox({
        'href' : url
    })
    .trigger('click');
}

希望这可以帮到你。

- Tuffkid

Answer 6

我的猜测是fancybox试图在没有点击事件的情况下显示。在fancybox显示后，您会触发一个在fancybox之外的单击事件，这会在它有机会显示之前将其关闭。将fancybox链接放在表格之外，然后当单击tr时，触发锚点单击，这将弹出fancybox。

如果问题仍然存在，您可能希望在fancybox库中添加一些调试语句以跟踪问题。

- Tony

Answer 7

jQuery Fancybox触发器仅起作用一次...

通常我们使用这样的方法 $(".fancybox").trigger('click'); 但它不能正常工作。

只需像这样更改您的触发器... 对我有效...

 $(".fancybox").fancybox().trigger('click');

首先在这里找到fancybox，然后触发它

- Mani K