jQuery with Fancybox on dynamically created elements. Only works on the second click and never on the first

Question

I am using Fancybox together with a slideshow. I have a slideshow that "dynamically" loads items from the database.

<div id="#slideshow">
    <div id="#slide-description">
        <a href="http://localhost/test.php">Fancybox here</a>
    </div>
</div>

Note: Everything inside the #slideshow div is dynamically generated by jQuery.

My javascript looks like this:

$("#slide-description").on('click', 'a', function() {
    console.log('triggerd click!');
    $(this).fancybox({
        type: "ajax",
        ajax: {
            dataFilter: function(data) {                
                return $(data).find("#portfolio-info");
            }
        },
        onComplete: function(){
            console.log('done.');
        }
    });
    return false; 
});

My problem is that it works ONLY works when I click on the link twice - <a href="http://localhost/test.php">Fancybox here</a>.

When I click the link the first time, triggered click! is logged in the console but no GET request. Then when I click it the second time, it works!

Console:

triggerd click! /* 1st click */
GET http://localhost:8888/raydar/portfolio/frucor-1/ 200 OK /* 2nd click */
triggerd click! /* 2nd click */
done. /* 2nd click */

Any reply would be greatly appreciated as I have already spent a few hours on this.

If everything inside of #slideshow is dynamically generated, that means you are destroying and recreating #slide-description, too. So you don't want to bind your listener to that. Why not bind the listener to #slideshow itself? — Greg Pettit, Jul 09 '12 at 04:16
Thanks for the reply Greg. I have tried `$("#slideshow").on('click', 'a', function() {...` and `$("#slideshow a").on('click', function() {...` and both do not work. The problem when I do this is that the `href` in the `` tag is followed/executed and it goes to the link instead of loading it in the Fancybox. Your thoughts? — wenbert, Jul 09 '12 at 04:27
If working with fancybox v1.3.4 and dynamically added elements, you could also check this http://stackoverflow.com/a/9084293/1055987 — JFK, Jul 09 '12 at 05:45

Greg Pettit · Answer 1 · 2012-07-09T04:30:16.437

1

As a reply to the question in the comment section:

If the problem is that the link is being followed, you need to prevent default behaviour:

$("#slideshow").on('click', 'a', function(e) {
  e.preventDefault();
  /* the rest */
});

Note that you can also use return false; at the end of the function, which prevents default behaviour and stops propagation, if that's what you need.

edited Jul 09 '12 at 04:30

answered Jul 09 '12 at 04:13

Greg Pettit

10,749
5
53
72

Thanks again. I have placed the "bind" on `$("#slideshow").on('click',...` as you have specified but still having a problem - it only works on the second click but not on the first one. – wenbert Jul 09 '12 at 04:41
1

I'm flying a bit blind without actually having Fancybox onhand. Does the $(this) reference fit? In the context, $(this) is a jQuery-wrapped anchor. Is that the right thing to be fancybox'd? Also part of flying blind: what exactly does `data` contain? Can it be jQuery wrapped? – Greg Pettit Jul 09 '12 at 04:43
Thanks so much Greg. Due to your comments and your answer, I am able to properly "fetch" the URL on the first click. I will be posting an answer shortly for the others. Again, thanks! – wenbert Jul 09 '12 at 04:54

score 1 · Answer 2 · answered Jul 09 '12 at 04:59

Greg Pettit's comments and answer gave me an idea of how to do it in another way. I re-read Fancybox's docs and found out that for Ajax requests, there is a url option.

From http://fancybox.net/blog:

$("#login_form").bind("submit", function() {

    if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }

    $.fancybox.showActivity();

    $.ajax({
        type        : "POST",
        cache   : false,
        url     : "/data/login.php", /*i'm talking about this*/
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });

    return false;
});

With that, I came up with this:

$("#slideshow").on('click','#slide-description a', function() {
    $.fancybox({
        type: "ajax",
        ajax: {
            type: "GET",
            url: $(this).attr("href"), /*we get the URL from "#slide-description a" and load it*/
            dataFilter: function(data) {                
                return $(data).find("#portfolio-info");
            }
        },
        onComplete: function(){
            console.log('done.');
        }
    });
    return false; 
});

Right on! Glad I could help in some small way. – Greg Pettit Jul 09 '12 at 05:20 — Greg Pettit, Jul 09 '12 at 05:20

jQuery with Fancybox on dynamically created elements. Only works on the second click and never on the first

2 Answers2