So im working on a site that uses ajax to load content between pages, but the javascript inside those pages stops working when its loaded, even though it works just fine if i visit the page directly.
Heres the index page
if you click “services”, you can see it it loads with the accordion sidebar not working. And when i visit the page directly, it works fine.
heres the ajax code im using (tried using live, but it didnt do the job)
i actually did change it to on, sorry for posting the old code. Heres what i got so far
$(‘.center’).on(‘click’, ‘.nav’, function(){
var href = $(this).attr(‘href’)+" Content"; // remove the extra space
$(‘Content’).hide().load(href).fadeIn();
return false
});
the weird thing is, if i changed the " Content" to “Content”, it loads everything in the services page, and the accordion works fine, but it also loads everything else (header, footer), instead of just whats in the Content div…
isnt this a common occurence while using ajax? or do people normally not have a problem with things like slideshows, accordions, or other plugins if they are loaded this way?
Oh, I see. You have an accordian inside your content page correct?
Based on how I read the script execution section of load. When you use Content as part of your URL, it will NOT load/execute the scripts associated to your html page (thus the accordian script isn’t loaded and therefore it won’t function).
I’m not 100% certain. That is one work-around. I’ve made my test to be a little more like yours, but it occasionally loads the whole file instead of just the Content section for me. Are you getting that issue too (using Chrome v17)?
That didnt work, it just hid all the content in the first page… But shouldnt there be a simpler way to do this, keeping the accordion and the ajax code seperate. I mean its the javascript in general that doesnt work once its loaded through ajax (the accordion just being an example). So if i had a slideshow, or any other number of js in there, this solution wouldnt work…
Unfortunately, using .load() causes this issue. The only option you have is to remove the header/footer components and then remove the Content from the .load() call, if you want clean unobtrusive markup.
I don’t see any other way of accomplishing it and using Content with the .load() call