Dynamically loading html with jQuery

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)

---

Try:

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

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

---

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

Or you can use .live()

---

$.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).