Geek Answers Handbook

JQuery fancybox only fires once

I am invoking a jquery.fancybox link from a click event bound to a table row. The action works fine for the first time, however, if I close fancybox and click on any line again, the anonymous function associated with this line still works, but fancybox does not start. Here is the javascript I am 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 HTML I have bindings classified as “edit”:

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

I can always see the warning window, and I can change the trigger / click () call to remove (), and it will "work", removing the bindings in several cases. I can also manually manually click the $ ('. Edit') link, and all this is good.

So, how does it happen that the anchor click event fires only once, when it in turn comes from the row click event? Is this somehow related to the call I make for $ (this) when describing a function?

+4
source share
6 answers

Take a picture:

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

Alternatively you can do:

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

Hope this helps!

+4
source

Try debugging

 $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 this works, you can simplify it to

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

I assume fancybox is trying to show without a click event. After fancybox is shown, you trigger a click outside the fancybox, which closes it before it can show. Place the fancybox link outside the table, and then when the tr button is pressed, invoke the anchor click that opens in a new window.

If this problem persists, you might want to discard some debug statements inside the fancybox library to track the problem.

0
source

Have you solved this problem? If this does not happen, there is a difficult way to solve this problem. I think that the trigger () method will not be bound when opening and closing the window. I added hidden elements to every click event:

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

Hope this helps

0
source

Tuffkid earned; I also worked to fix this problem, and I came to the same conclusion that he did; anyway.

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)); }); } }); }
0
source

jQuery fancybox trigger only works once.

Usually we use this $ (". Fancybox"). trigger ('click'); but it does not work properly.

Just change your tiger like this ... its work for me ...

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

Find fancybox here first, then activate it

0
source

More articles:


All Articles