After injecting html, a cached jQuery selector gives different result from non-cached selector

Question

Found the solution! Don't bother creating an answer

Turns out I was injecting the html twice - once before creating the selectors, and then, due to some unfinished refactoring, a second time; thus overwriting the relevant parts of the DOM. The cached selectors were still referencing the old DOM part, though, and so kept it from being garbage collected. Changing the old part had, of course, no impact on the newer parts, something that was clearly shown by making jQuery do the selection anew.

Question

I am in the process of trying to create a widget. After running its script, the widget finds a with a certain code tag (referenced as $rootElem below), downloads a piece of html code and injects it into this div. After doing this, it starts attaching events to input elements, building ui elements like sliders, etc.

AFAIK, after injecting html into the DOM, the resulting DOM should be equivalent to just having the html there to begin with. Turns out that jQuery thinks otherwise. Just to be specific, I am first injecting the html, and second starting to find and cache selector results.

The following to code blocks should be equivalent (do the same thing); change a piece of html like <span>awaiting calculation ...</span> into something like <span>1234</span>. And, lo and behold, if I put all the html into the same document (not injecting it), they actually are doing the same thing.

Caching the selector result for later retrieval

var $result = $rootElem.find( "div.result p:nth-of-type(1) span" );
$.subscribe( "/server/calculateLoan/finished", function ( e, firstPayment ) {
    $result.text( firstPayment ) );
} );

Doing the selection every time

$.subscribe( "/server/calculateLoan/finished", function ( e, firstPayment ) {
    $rootElem.find( "div.result p:nth-of-type(1) span" ).text( firstPayment ) );
} );

But if I move the widget's html code out of the main document, and inject it before working on it, only the non-cached (latter) version works. Actually the first one also seems to work. If I set a break point in the anonymous function I can see a weird thing happening:

>   $result.text()
    <span>awaiting calculation ...</span>
>   $rootElem.find( "div.result p:nth-of-type(1) span" ).text()
    <span>awaiting calculation ...</span>
>   $result.text("1234") //This is not showing in the browser window!
    [<span>1234</span>]
>   $result.text() //This is not showing in the browser window!
    [<span>1234</span>]
>   $($result.selector).text() //What kind of magic is this?!
    <span>awaiting calculation ...</span>
>   $rootElem.find( "div.result p:nth-of-type(1) span" ).text()
    <span>awaiting calculation ...</span>

It seems as if the cached jQuery selector points to another DOM element (whose changes are not shown) than if I search for the same element. And this only happens when injecting the html, not when the widget's html has been copy-pasted into the page. Anyone cares to explain what is happening?

This happens in both Chrome and Firefox.

The html bit on the main page looks like this:

    <div id="widget_calculator"><!-- dynamic fetch --> </div>

The widget's html

<h1>Widget calculator</h1>

<div class="user-inputs">...</div>
<div class="result">
    <p><span>awaiting calculation ...</span></p>
</div>

The code that injects the html

function fetchHtmlTemplate( templateUrl ) {
    // set globals
    $ = jQuery;
    $rootElem = $( "#widget_calculator" );

    $.get( templateUrl, function ( htmlTemplate ) {
        $rootElem.html( htmlTemplate );
        buildWidget();
    } );
}