jquery fancybox triggered click only working once

Question

I am calling a jquery.fancybox link from the click event bound to a table row. The action works fine the first time, however, if I close the fancybox and click again on any row the anonymous function bound to the row still fires, but fancybox doesn't start up. Here's the javascript I'm using:

$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");
  });

});

So, then in the HTML I have anchors classed as "edit":

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

I can always see the alert box, and I can change the trigger / click() call to remove() and it will "work", removing the anchors on multiple occasions. I can also repeatedly manually click the $('.edit') link itself and it's all good.

So how is it that the anchor click event fires only once when coming in turn from the row click event? Is it something to do with the call I am making to $(this) when describing the function?

Answer 1

Try this to debug

$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");
    }
});

If all that works, then you can simplify it to

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

Answer 2

My guess is that fancybox is trying to show without the click event. After fancybox shows, you trigger a click outside of fancybox which closes it before it has a chance to show. Put the fancybox link outside of the table and then when tr is clicked, trigger the anchor click which will pop open fancy box.

If this problem persist, you may want to throw some debug statements inside the fancybox library to track down the issue.

Answer 3

Did you solve this problem? If didn't, there is a tricky way to solve this. I think the 'trigger()' method will be unbinded when you open once and close the box. I added hidden elements every click events:

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

Hope this helps