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

Give this a shot:

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

    return false;
});

Alternatively, you could do:

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

    return false;
});

Hope that helps!

Answer 2

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 3

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 4

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

Answer 5

Tuffkid got it working; I was working on something to fix this issue too and I came to the same conclusion he did; just sharing, anyway.

On load:

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

JS Function:

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

Answer 6

jquery fancybox trigger working only once..

Normally we are use like this $(".fancybox").trigger('click'); but its not working properly.

Just change your tigger like this... its working for me ...

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

Here at first find the fancybox then trigger it

Answer 7

I did add

elem.removeData( "fancybox" ); 

after

.trigger('click');

It worked for me.