Dynamically loading html with jQuery

Question

I'm running into a bit of an issue with this site I am currently building, I am using jQuery's .load() to grab an html file and include it in the #content of my site

<a href="#" onclick="$('#content').load('port/1.html')">1</a>

The chunk of code that is being pulled in has a jQuery click function on a few thumbnail images..

<div id="bigImg"><img src="images/1large.jpg" alt="Large View" id="lrg" /></div>
<div id="thumbCont">
<div class="thumb first"><img src="images/thumb1.jpg" alt="Thumbnail 1" data-lrg="images/1large.jpg" class="th"></div>
<div class="thumb"><img src="images/thumb2.jpg" alt="Thumbnail 2" data-lrg="images/2large.jpg" class="th"></div>
<div class="thumb"><img src="images/thumb3.jpg" alt="Thumbnail 3" data-lrg="images/3large.jpg" class="th"></div>
<div class="thumb"><img src="images/thumb4.jpg" alt="Thumbnail 5" data-lrg="images/4large.jpg" class="th"></div>
<div class="thumb last"><img src="images/thumb5.jpg" alt="Thumbnail 5" data-lrg="images/5large.jpg" class="th"></div>
</div>

and here is the jQuery to swap the images..

$(document).ready(function() {
    $('img.th').click(function(){
        lrg = $(this).attr('data-lrg');
        olrg = $('#lrg');
        if (lrg != olrg.attr('src')) {
            olrg.fadeOut('normal',function(){olrg.attr('src',lrg)});
            olrg.fadeIn();
        }
    });
});

So when the user clicks on the image, jquery pulls the new image src from data-lrg. This function works great, until I decided to pull the html with jquery instead of php.

Any idea why jQuery would not recognize the new html?

My thoughts: I'm guessing it has something to do with jQuery setting up shop before this part of the page is loaded, which tells me that I need to figure out a way to tell jQuery to look at this section again, or look at the whole page again.... but I am at a loss on how to do that.

(I know the onclick isn't the best way to do it, but it makes it easy for early development)

Have tested with simple html pages and is working fine.

amantur
– amantur

2011-04-14 08:49:56 +00:00
Commented Apr 14, 2011 at 8:49 — amantur
– amantur, Commented Apr 14, 2011 at 8:49

Ian Devlin · Accepted Answer · 2011-04-14 08:28:44Z

6

Try:

$('img.th').live('click', function(){...});

That way the click action is attached to any current and future img.th selectors.

answered Apr 14, 2011 at 8:28

Ian Devlin

18.9k6 gold badges59 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

herostwist · Accepted Answer · 2011-04-14 08:31:36Z

4

You need to attach the event handlers after you have loaded the html.

Or you can use .live()

answered Apr 14, 2011 at 8:31

herostwist

3,9781 gold badge30 silver badges36 bronze badges

Comments

Gary Chambers · Accepted Answer · 2011-04-14 08:47:04Z

2

$.delegate tends to be preferred in favour of $.live. You can delegate the event listener from a parent element, and this will respect all current and future child elements:

$('#thumbCont').delegate('img.th', 'click', function(e) {
  // ...
});

Edit

A little more detail on the differences between delegate and live:

They behave in a similar way, but delegate tends to outperform live; it would be going a bit far to suggest that live is deprecated as so much code relies on it, but delegate was introduced in 1.4 to address some of the pitfalls of live (introduced in 1.3). Basically, live attaches an event listener to the document, whereas delegate attaches it to the selector passed to your jQuery method. There are fewer chances for unintended collisions, it performs better, as it only has to traverse a small subset of elements, and there are some side-issues with chaining that live struggles with (more here).

edited Apr 14, 2011 at 8:47

answered Apr 14, 2011 at 8:36

Gary Chambers

25.9k5 gold badges37 silver badges31 bronze badges

1 Comment

Ian Devlin Over a year ago

Well I wasn' aware of that. You learn something new everyday.

Collectives™ on Stack Overflow

Dynamically loading html with jQuery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related