Jquery Fancybox Triggered Click Only Working Once

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 th

Solution 1:

Give this a shot:

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

    returnfalse;
});

Alternatively, you could do:

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

    returnfalse;
});

Hope that helps!

Solution 2:

Try this to debug

$jq('tr').click(function() {
    // Step 1: make sure the following expression is actually returning elementsvar 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();
});

Solution 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.

Solution 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:

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

Hope this helps

Solution 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:

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