How can I make ALL links load pages dynamically? (Even links in dynamically loaded pages)

Question

So I have a script like this

    <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;
    </script>
    <script type="text/javascript">
       $(document).ready(function(){
       $("a[href*='http://']:not([href*='"+location.hostname+"'])").attr("target","_blank");

       $("a[target!='_blank'][target!='_top']").click(function(){

       var url=$(this).attr("href")+'?jquery=1';
       ajaxpage(url,'actualcontent');

       window.location.hash=$(this).attr("href");
        return false;
    });


});
    </script>

and it works great. It means all my links load dynamically within the DIV - awesome. But, the links loaded in those div, don't load dynamically when clicked. and if I include this script in it, it still doesn't work. And on a similar note, is there a way of making javascript in pages, which have been loaded dynamically, work? Without including it in the original header?

Thanks.

Answer 1

Disclaimer: To use this solution, you'll need to upgrade to jQuery 1.3 or jQuery 1.4+
(But you should, there are many performance improvements and bug fixes since 1.2.6)

---

Instead of .click() you can use .live() here, like this:

$("a[target!='_blank'][target!='_top']").live('click', function(){

.live() works on dynamically added elements as well, since it's listening for the bubbling click event at document, rather than being a handler on the element itself.

Answer 2

Not sure what your problem is. You are saying that the links that are added after this function rn do not use this function? hint, you need to rescan the page to update the links in that div OR you can avoid that and use live().

Answer 3

Use .delegate()

// Don't need to put this in a $(document).ready() callback.
$(document).delegate("a[target!='_blank'][target!='_top']", "click", function(e){
    var url=$(this).attr("href")+'?jquery=1';
    ajaxpage(url,'actualcontent');
    window.location.hash=$(this).attr("href");
    e.preventDefault();
    return false;
});

$(document).delegate("a[href*='http://']:not([href*='"+location.hostname+"'])", "click", function(){
    // lazy attr setting, reduces query cost
    $(this).attr("target", "_blank")
});