load content from already loaded content

Question

I've got a menu from which I load content from different html pages into my div id="content"; I would like to load content from the loaded content; not working

I tried all kind of stuff and got totally lost, like .live(click,..), and empty(), remove(), and stuff. what I get again and again is quite the content but not in my div, ie without css, plus clicking the link within the loaded content will take me to another page, instead of loading content from that page into my current one.

$(document).ready(function() {


    $('#nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';

        $('#content').hide('fast',loadContent);

        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }

        function showNewContent() {
            $('#content').show('normal');
        }

        return false;    
    });
});

Answer 1

I now got it: the issue is event delegation, meaning: loaded content is not sort of registered by the dom structure. So you have to delegate the click event to an ancestor, which had been loaded initally:

/* on click - event delegation to #staticAncestor / / $(staticAncestors).on(eventName, dynamicChild, function() {}); */

this is kind of a local solution; I no longer find it, but there are global answers too research 'event delegation'