Run AJAX-loaded scripts in partial document context

HTML

<h1>normal</h1>
<div class="externalpage">data</div>
<br/>
<p>On success, "below normal" will only appear once, at the bottom.</p>

CSS

h1 {
    font-size: larger;
    font-weight: bolder;
}

.externalpage {
    background-color: #DDEEFF;
}

JavaScript

$(document).ready(function() {
    var markup = "<div><h1>ajax</h1></div><script>$(document).ready(function() { $('h1').text('below normal'); });"+"</script>";
    $.ajax({
        url: "/echo/html/",
        type: "POST",
        dataType: "html",
        data: {
            html: markup
        },
        success: function(data) {
            var $root = $(".externalpage");
            var realFind = $.find;
            $.find = function(query, context, extra, seed) {
                return realFind.apply(this, [
                    query,
                    context && context !== document ? context : $root[0],
                    extra,
                    seed
                ]);
            };
            $(p).append("<div>1</div>");
            $root.html(data);
            $(p).append("<div>2</div>");
            $.find = realFind;
        }
    });
});