Home/ Questions/Q 684921
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T01:52:11+00:00

I’m trying to load one page into another using the .load() method. This loaded

  • 0

I’m trying to load one page into another using the .load() method. This loaded page contains a script that I want to execute when it has finished loading. I’ve put together a barebones example to demonstrate:

Index.html:

<html>
<head>
 <title>Jquery Test</title>
 <script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function()
  {
    $('#nav a').click(function()
    {
      $('#contentHolder').load('content.html #toLoad', '', function() {});        
      return false;
    });
  });
 </script>    
</head>
<body>
 <div id="nav">
  <a href="content.html">Click me!</a>
 </div>
 <hr />
 <div id="contentHolder">
  Content loaded will go here
 </div>
</body>
</html>

Content.html:

<div id="toLoad">
 This content is from content.html

 <div id="contentDiv">
    This should fade away.
 </div>

 <script type="text/javascript">
  $('#contentDiv').fadeOut('slow', function() {} );
 </script>
</div>

When the link is clicked, the content should load and the second paragraph should fade away. However it doesn’t execute. If I stick a simple alert(“”) in the script of content.html it doesn’t execute either.

However, if I do away with the #toLoad selector in the .load() call, it works fine. I am not sure why this is, as the block is clearly in the scope of the #toLoad div. I don’t want to avoid using the selector, as in reality the content.html will be a full HTML page, and I’ll only want a select part out of it.

Any ideas? If the script from content.html was in the .load() callback, it works fine, however I obviously don’t want that logic contained within index.html.

I could possibly have the callback use .getScript() to load “content.html.js” afterwards and have the logic in there, that seems to work? I’d prefer to keep the script in content.html, if possible, so that it executes fine when loaded normally too. In fact, I might do this anyway, but I would like to know why the above doesn’t work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you look at the jquery source, you will see that the .load() method simply removes all scripts from the loaded content (if a selector was specified).

        jQuery.ajax({
        url: url,
        type: type,
        dataType: "html",
        data: params,
        complete: function( res, status ) {
            // If successful, inject the HTML into all the matched elements
            if ( status === "success" || status === "notmodified" ) {
                // See if a selector was specified
                self.html( selector ?
                    // Create a dummy div to hold the results
                    jQuery("<div />")
                        // inject the contents of the document in, removing the scripts
                        // to avoid any 'Permission Denied' errors in IE
                        .append(res.responseText.replace(rscript, ""))

                        // Locate the specified elements
                        .find(selector) :

                    // If not, just inject the full result
                    res.responseText );
            }

            if ( callback ) {
                self.each( callback, [res.responseText, status, res] );
            }
        }
    • 0