jQuery events and .load()

Question

Hi All

Never ran into this problem with jQuery before. I have the following:

$(document).ready(function() {
    $('#browser_cat a').click( function() {
        $('#browser_cat').hide();
        $('#browser_cat').load('/api/browser/catchildren/'+$(this).attr('id'));
        $('#browser_cat').fadeIn();
        return(false);
    })
});

Pretty simple stuff. And it works, however the data gathered by .load() doesn't retrigger the event. It is a drill-down category type thing ... so level-1 does the load but then leve-2 bails to the href rather than triggering the click() event again.

The loaded HTML is a #browser_cat with links, and the generated DOM is OK.

I appriciate this is elementary. Thanks in advance.

---

Answer modified code:

$(document).ready(function() {
    $('#browser_cat a').live("click", function() {
        $('#browser_cat').hide();
        $('#browser_cat').load('/api/browser/catchildren/'+$(this).attr('id'));
        $('#browser_cat').fadeIn();
        return(false);
    })
});

Answer 1

Use live event

Attach a handler to the event for all elements which match the current selector, now or in the future.

Replace

$('#browser_cat a').click( function() {

with

$('#browser_cat a').live("click", function() {