Javascript is not working with a page loaded using ajax
Posted: Sun Jan 23, 2011 7:37 pm
I have a template that runs on hashtags in the url to dictate what page should be displayed. The only content that gets changed when someone changes pages is the main content, both the top and bottom of the page remain static.
In my header file I have some javascript that (should) apply to all links on the page
This lets me click a link on the page and it should add the info to the hashtag in the url based on the A tag's ID value.
My index.php file has the javascript above and then I call a function to load the page based on the hashtag in the url by calling
Which runs a $.get() request and then loads the response text into the main content area of the page.
The problem is that any content that I get through loadpage() is not being subjected to the javascript defined previously, meaning the links aren't doing anything when they're clicked.
Is there a way to be sure the javascript applies to the content being added to the page through ajax?
In my header file I have some javascript that (should) apply to all links on the page
Code: Select all
$('a').click(function(e)
{
location.hash = this.id;
e.preventDefault();
loadpage(this.id);
});My index.php file has the javascript above and then I call a function to load the page based on the hashtag in the url by calling
Code: Select all
loadpage(location.hash)The problem is that any content that I get through loadpage() is not being subjected to the javascript defined previously, meaning the links aren't doing anything when they're clicked.
Is there a way to be sure the javascript applies to the content being added to the page through ajax?