jQuery.load script execution

Shows how jQuery.load executes scripts in loaded content.

HTML

<div>
    <p>HTML Payload:</p>
    <pre id="code">
        Loading...
    </pre>
</div>
<div>
    <p>Expected:</p>
    <ol id="expected">
    </ol>
</div>
<div>
    <p>Actual:</p>
    <ol id="actual">
    </ol>
</div>
<div>
<div id="loadtarget">
    <p>Loading...</p>
</div>


<!-- Identical to HTML Payload, except for the target. -->
<script>$('#expected').append('<li>1. (inline)</li>');</script>
<script src="http://jsfiddle.net/echo/js/?js=%24('%23expected').append('%3Cli%3E2.%20(external)%3C%2Fli%3E')%3B"></script>
<script>$('#expected').append('<li>3. (inline)</li>');</script>
<script src="http://jsfiddle.net/echo/js/?js=%24('%23expected').append('%3Cli%3E4.%20(external)%3C%2Fli%3E')%3B"></script>

JavaScript

$('#expected').append('<li>5. (onload)</li>');


var inlineScript = function(script)
{
    return "\<script\>" + script + "\</script\>\n";
};

var externalScript = function(script)
{
    return "\<script src=\"http://jsfiddle.net/echo/js/?js="
        + encodeURIComponent(script)
        + "\"\>\</script\>\n";
};

var payload = "";
for (var i = 1; i <= 4; ++i)
{
    if (i & 1)
        payload += inlineScript("$('#actual').append('<li>" + i + ". (inline)</li>');");
    else
        payload += externalScript("$('#actual').append('<li>" + i + ". (external)</li>');");
}

var onload = function()
{
    $('#actual').append('<li>5. (onload)</li>');
}

var target =  $('#loadtarget');
var code =  $('#code');
code.text(payload);
target.load('/echo/html/', {html:payload}, onload);