jquery fail on DOM modify made with html()

Question

In my website, I build the page navigation based on hashchange:

var hashHome;
$(window).bind( 'hashchange', function(e) {
    var homeClass = "home";
    var url = $.param.fragment();
    if($('#page-content').hasClass(homeClass)){
        hashHome = $('#page-content').html();
    }

    if(url ==''){
        //homepage with nothing(no hash)
        if(!$('#page-content').hasClass(homeClass)){
            //alert("load frim cache ->#"+url);
            $('#page-content').addClass(homeClass);

            $('#page-content').html(hashHome);
        }
    }else{
        //go to some page 
        if($('#page-content').hasClass(homeClass))
            $('#page-content').removeClass(homeClass);
        initAction(url);
    }
})
$(window).trigger( 'hashchange' );

When the site loads its homepage, the homepage gets stored in hashHome. If user navigates away, the initAction(id) replaces the entire $('#page-content')'s content with other pages' content. When the uses navigates back to home, it restores the stored home back to the $('#page-content').

My problem is that all of the jQuery stopped working on the homepage.

I've read about live() already but it seems that it needs a event like click() for it to work. How do I fix this?

Answer 1

I figured out that i need to store my entire page before i change the content of the div that is surrounding it

var content$('#page-content').html();

then do the content change

that way, when i reinitialize all my jQuery plugins, they will loose all of their old reference and use the new content variable, instead of a double initialization

and finally, i've the original question's code also won't work since the script tag look like this: <script type="text/javascript">...</script>, IE for some reasons won't recognize this, so I have to change it to <script></script> in order to make it cross browser compatible