Scripts dont load for AJAX generated content - Help Please

[ThatBloke]

Hi All

I'm going to keep this simple. I'm using a hashchange plugin for my page navigation

I can't get scripts to run for the AJAX generated content. They run perfectly without the hashchange

Here is a link to my current project:

http://www.bluecoast.co.uk/test/temptation

Here is the script that handles the hashchange:


$(function() {

var newHash = "",
$mainContent = $("#right"),
$pageWrap = $("#wrap"),
baseHeight = 0,
$el;

$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $pageWrap.height();

$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});

$(window).bind('hashchange', function(){

newHash = window.location.hash.substring(1);

if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};

});

$(window).trigger('hashchange');

});

I'm loading the scripts in the header of the main index.php page like so:


<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>

<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->

<script type="text/javascript" src="js/custom.js"></script>

Would somebody be kind enough to help me with this?

Thanks in advance
Craig

[nikomou]

I'm having a similar problem..

I am loading external content using .load, I have functions in the main document which is called from the external content, but nothing happens!

If I include the external content using php include then those functions work! but obviously I would like to do this with jquery too!

[ThatBloke]

Hi Nikomou

It would work with php includes as that's processed server side before the page is served and the scripts are run. Meaning the elements are already present when the functions are called

I think the problem here is the the new elements are not added to the DOM and so the scripts ignore them

It's a pain as I know what needs to be done, I just can't do it! lol

[nikomou]

Hi ThatBloke,

I found a post here - http://stackoverflow.com/questions/3114739/loading-elements-into-the-dom-with-jquery

which lead me to the live() api - http://api.jquery.com/live/

Any idea how to implement it?

Niko

[jscheuer1]

If you're using .load() to import contents via AJAX and you have something like $('.whatever').click(function() . . .

You can do instead:


$('.whatever').live('click', function() . . .

You can do this with any event and it will apply to $('.whatever') whenever it shows up. But you can only do it with events. That gives you a lot to work with, but might require that you rethink things a little or a lot. If all you're trying to do is attach an event though, .live() works virtually seamlessly as a substitute for the event. See:

http://api.jquery.com/live/

for more info.

[ThatBloke]

Thanks jscheuer1

nikomou - I've found an easier solution which works a treat for me. jscheur1's solution will also work:

Create an anonymous function that calls another function on document ready, I've called mine init:


$(document).ready(function() {
init();
});

Then include all your custom scripts (not libraries or plugins as they're already loaded) in the init function, e.g:


function init() {
//Include all your scripts here//
}

Hope it helps