JQuery: .getScript() is not working when loaded from a .load()

Question

You can see the way its suppose to work by visiting: link text

That is loading everything using standard loading.

You can attempt to get it to load dynamically here: link text
and then simple just click the "Parts" link... As you can see no alert every comes to me.

I have a feeling it has to do with the ability of detecting when to fire the getscript..as ondomready wouldn't reload when loading dynamically.

---

Here is the main script that will load the content:

$('#sub-navigation li a').click(function(){
    var toLoad = $(this).attr('href')+' #content-container > *';
    $('#content-container').hide('fast',loadContent);


    var href = $(this).attr('href');
    if (href == ".") {
        window.location.hash = ""; 
    } else {
        window.location.hash = href; 
    }

    // first remove the selected class from the active one
    $('#sub-navigation li.selected').removeClass('selected');
    // then find the parent li of the clicked element and add the selected class
    $(this).parents('li').addClass('selected');

    //$('#load').remove();
    //$('#wrapper').append('<span id="load">LOADING...</span>');
    //$('#load').fadeIn('normal');


    function loadContent() {
        $('#content-container').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#content-container').show('normal',hideLoader());
    }
    function hideLoader() {
        //$('#load').fadeOut('normal');
    }
    return false;

});

Here is the file that gets loaded:

<div id="sub-navigation-content" class="transparent">
</div>
<div id="content-container" class="transparent">
    <div id="content">
        <link rel="stylesheet" type="text/css" href="/files/tablesorter/themes/blue/style.css">
        <script type="text/javascript"> 
            $(document).ready(function () {
                $.getScript("/files/tablesorter/jquery.tablesorter.min.js", function() {
                    $("#parts").tablesorter();
                    alert('sort performed');
                });
            });
        </script> 
        !!!!!!! INSERT MORE HTML HERE !!!!!!!
    </div>
</div>

here is the rest of the "INSERT MORE HTML HERE":

                <h1>Parts</h1>
            <table id=parts class=tablesorter style="width: 500px;">
                <thead>
                <tr>
                    <th>Part #</th>
                    <th>Part Description</th>
                    <th>Price</th>
                    <th>Additional<br>Shipping</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>AM01</td>
                    <td>ECONOMY OARS (EACH)</td>
                    <td>$30.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM02</td>
                    <td>DELUXE OARS (EACH)</td>
                    <td>$42.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM03</td>
                    <td>OAR LOCKS (PAIR)</td>
                    <td>$10.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AM04</td>
                    <td>LAKER BOW CASTING</td>
                    <td>$25.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM05</td>
                    <td>PRO BOW CASTING</td>
                    <td>$25.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM06</td>
                    <td>OAR LOCK CASTING W/INSERT</td>
                    <td>$28.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM07</td>
                    <td>REAR CORNER CASTING RIGHT</td>
                    <td>$25.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM08</td>
                    <td>REAR CORNER CASTING LEFT</td>
                    <td>$25.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM09</td>
                    <td>FISHERMAN BOW SET (3 PC.)</td>
                    <td>$25.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM10</td>
                    <td>OAR LOCK INSERTS (EACH)</td>
                    <td>$4.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AM11</td>
                    <td>DRAIN PLUG (5/8 MODIFIED)</td>
                    <td>$5.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AC06</td>
                    <td>LIFT VEST TYPE III</td>
                    <td>$25.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AC07</td>
                    <td>1" DRIAN PLUG</td>
                    <td>$5.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AC09</td>
                    <td>5/8" DRAIN PLUG</td>
                    <td>$5.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AM11</td>
                    <td>TOUCH UP PAINT</td>
                    <td>$15.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AM69</td>
                    <td>CONSOLE (SUPER PRO 16)</td>
                    <td>$135.00</td>
                    <td>Please call</td>
                </tr>
                <tr>
                    <td>AM70</td>
                    <td>CONSOLE W/STEERING (SUPER PRO 16)</td>
                    <td>$430.00</td>
                    <td>Please call</td>
                </tr>
                </tbody>
            </table>

---

As per the catch by jason in the answers. I have no choice to my knowledge than to make an ugly work-around as follows:

If anyone has an idea that is more elegant, please let me know.

    function showNewContent() {
        $('#content-container').show('normal',hideLoader);

        if (href == "parts") {
            $.getScript("/files/tablesorter/jquery.tablesorter.min.js", function() {
                $("#parts").tablesorter();
            });
        }
    }

Answer 1

Here's the relevant bit of code from $.load that performs the insert in jQuery 1.4.2 (starting line 4820):

// Request the remote document
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] );
        }
    }
});

As you can see, that if a selector is specified in the content to be loaded (which you are), jQuery will remove all inline script blocks from the HTML before inserting it into the page.

Why? The creation of a DOM document fragment on the fly is not at all consistent across browsers, and there's no real way to control when, how, or even if the script(s) will get executed.

One example would be: Should it happen when the fragment is created (as jQuery does, before it runs the selector on it)? In this case, your new content won't actually be part of the parent document when the script is ran.

How can you work around this? Well, you can always recreate what $.load() does internally, (essentially just issue a GET request, create a jQuery object from the response, then call .find(selector) on it before appending/injecting). But, beware. This may be unreliable, and I have no idea how different browsers may react to this.

I remember reading a long discussion about exactly this a while back--I can't find it right now, but when I do, I'll add a link here.