CODEWITHSUNDEEP
javascriptjqueryajax
Zac
Zac

Reputation: 12836

Working with a selector that is loaded through ajax

I am loading content from a series of links like this :

<div id="tagList" style="display: block;">
  <ul class="post_tags">
    <li id="barrow" class="count-1"><a class="barrow" title="Barrow Tag" href="#Barrow">Barrow</a></li>
    <li id="carnies" class="count-3"><a class="carnies" title="Carnies Tag" href="#Carnies">Carnies</a></li>
    </ul>   
</div>

These then open up a series of images with ajax loading the relevant page, that function looks like this :

    $('#tagList li').each(function() {
        $(this).click(function() {

            var tagName = $(this).attr("id");
            var tagURL = '<?php bloginfo( 'url' );?>/tag/' + tagName;
            var toLoad = '<?php bloginfo( 'url' ); ?>/tag/'+ tagName + ' .tagTable';


            function loadThemTags(){    

            $('#tagThumbs').load(toLoad,hideLoader);
            };

            function hideLoader(){

            $('.tagTable').fadeIn('slow');
            };

            loadThemTags();

        });
 });

The content that is loaded in .tagTable looks like :

<ul id="tagImgBox">         
    <li class="466">
        <div style="display:none" class="466_link">http://foo.com/portfolio/louie</div>
        <img class="tagInfoTrigger" alt="Louie" src="http://foo.com/wp-content/themes/Loupe/scripts/timthumb.php?src=/wp-content/uploads/2011/08/louie.jpg&amp;w=80&amp;h=80&amp;zc=1">
    </li>   
    <li class="418">
        <div style="display:none" class="418_link">http://foo.com/portfolio/devo-and-seigfried</div>
                <img class="tagInfoTrigger" alt="Devo and Seigfried" src="http://foo.com/wp-content/themes/Loupe/scripts/timthumb.php?src=/wp-content/uploads/2011/06/devo_siegfried_2.jpg&amp;w=80&amp;h=80&amp;zc=1">
    </li>
</ul>

I want to work with the link that is printed in the hidden div. I have this script :

$('#tagImgBox li').each(function(){
    $(this).click(function(){
    var uc = $(this).attr('class');
    var uc = uc + "_link";
    var up = $('.' + uc).html();
    alert (up);
    });
});

which works if I navigate straight to the /tag/ page. But if I access the ajax loaded .tagTable they do not work. Nothing happens, even break points are ignored. It is as if #tagImgBox li does not exist but I can see the id is there when pulled through the ajax.

Hope my question makes sense and thanks for any help!

Upvotes: 1

Views: 81

Answers (3)

ChrisLeBlanc
ChrisLeBlanc

Reputation: 1

Add the $('#tagImgBox li').each code to the end of your hideLoader() function.

Upvotes: 0

cdeszaq
cdeszaq

Reputation: 31280

You need to use .live() instead of .click().

The code you have now only attaches the click handler to the selected elements when you run it. What you want to do is have the click handler attached to all elements that match no matter when they show up (so, this means things that are loaded via AJAX after the page has finished loading initially).

Here's the code you should use:

$('#tagImgBox li').live("click", function(){
    var uc = $(this).attr('class');
    var uc = uc + "_link";
    var up = $('.' + uc).html();
    alert (up);
    });
});

You also don't need .each() (using .live() or .click()) because event handlers will attach to each selected element by default. In fact, most jQuery methods behave this way.

By using .live(), you will be able to load elements that match and have the handler attach to them automatically.

Upvotes: 1

Jonathan
Jonathan

Reputation: 1892

Are you sure the ul (tagImgBox) and it's containing li exist in the DOM when your .each is ran?

It sounds like a concurrency issue in that the #tagImgBox li really doesn't exist yet. You need to either: post more code so we can see where the .each is actually ran, or look at event binding a load-complete function.

Upvotes: 1

Related Questions