Loading HTML snippets using jQuery

Question

I am very new to jQuery, Ajax and similar things. I found solutions on how to inject HTML snippets into my website:

 $(document).ready(function(){  
     $('a').click(openContent); //binding all anchors to this function
 });

function openContent(){ 
 var path = $(this).attr('href');
 $('#content').load(path); 

 return false; //to prevent browser from loading the single HTML fragment
}

This works great! The problem is that this function will not be executed when clicking on the anchors located in the new HTML fragment that were entered right before that. Thus, the fragment will not be entered into the div, the browser will only download the fragment for itself.

Hope there are solutions that are not so complicated ... thanks

---

UPDATE:
Alright, living does a good job BUT,

There are also images related to the jQuery lightbox (balupton-edition) plugin with rel = "lightbox-tour" in these snippets. They appear in a new window instead of lightbox-div. Any suggestions?

Answer 1

live, :

$('a').live('click',openContent);

Answer 2

jQuery 1.4+
$(document).delegate('a', 'click', openContent);

* , , . , . , live. , , div "contentArea" . $("#contentArea").delegate('a', 'click', openContent);.

: Live() Delegate()

Answer 3

So, the lightbox does not handle dynamically loaded links? You can update your code to re-launch the lightbox plugin in the download callback. Something like that:

$(document).ready(function(){  
    $('a').live('click', openContent);
});

function openContent(){ 
    var path = $(this).attr('href'),
        content = $('#content');

    // added callback here
    content.load(path, function () {
        content.lightbox();
    }); 

    return false; 
}