View Full Version : jQuery .load is not loading the javascript on the other page

12-29-2009, 02:12 AM
I am using the load function in jquery. When i load the remote page the HTML loads fine, but the JavaScript that was on the page was not loaded.

Does the load function only inject HTML to the DOM?
If so, is there any other way to achieve what I am trying to do?

12-29-2009, 07:09 PM
I tried this out myself and apparently any script tags found in the HTML that is to get loaded gets executed rather than brought over and added to the DOM like other tags.

01-21-2010, 12:58 AM
Has anyone got an answer to his question because i have the same problem i will post my code

It's a ajax/jquery switch I'll paste the corresponding code

/* Links */

<ul id="menu">
<li><a id="home">Home</a></li>
<li><a id="about">About Me</a></li>
<li><a id="shop">My Shop / Wishlist</a></li>
<li><a id="friend">My Friends</a></li>
<li><a id="vids">Wicked Videos</a></li>
<li><a id="music">Music Playlist</a></li>
<li><a id="pics">My Pictures</a></li>
<li><a id="ranks">My Rankings</a></li>
<li><a id="stuff">Random Stuff</a></li>
<li><a id="read">Read Messages</a></li>
<li><a id="leave">Leave a Message</a></li>
</ul>/* Content Div*/

<div id="content">
<div id="loading">
<img src="images/loading.gif" alt="Loading..." />
/*JS Switch*/

var sections = $("#menu a");
var loading = $("#loading");
var content = $("#content");

//Manage click events
//show the loading bar
//load selected section
case "home":
case "about":
case "shop":
case "friend":
case "vids":
case "music":
case "pics":
case "ranks":
case "stuff":
case "read":
case "leave":
content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
//hide loading bar if there is no selected section

//show loading bar
function showLoading(){
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
NOW for where the JS won't load

/*Section html*/

<div id="home_section">
Home haha

<div id="about_section">
<center>HEHE About</center>
<script type='text/javascript'>
imvu_avatar_name = "TheDarkRaver";
imvu_panel_name = "rankings_panel";
imvu_section_name = "mp_right";
imvu_panel_width = 320;
imvu_panel_height = 228;
<script type='text/javascript'

<div id="shop_section">

01-21-2010, 05:34 PM
When you load a page via AJAX, you need to reattach the event handlers to that page. Javascript will only work with what was present at the time the page loaded. jQuery has .live event that helps reattach the handlers and there are a couple of plugins, such as livequery, that are a little more robust, at least before 1.4. Not sure what they've changed, if anything, with .live in 1.4.

For example, with .click events you will want to use something like:

$("#div").live('click', function() {});


EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum