Javascript 注入html后，缓存的jQuery选择器会给出与非缓存选择器不同的结果 找到了解决办法！不要费心去创造一个答案

事实证明我注射了两次html——一次是在创建选择器之前，然后，由于一些未完成的重构，第二次；从而覆盖DOM的相关部分。不过，缓存的选择器仍在引用旧的DOM部分，因此不会对其进行垃圾收集。当然，更改旧部件对新部件没有影响，让jQuery重新进行选择就清楚地表明了这一点

问题: 我正在尝试创建一个小部件。运行脚本后，小部件会找到一个带有特定代码标记（下面引用为$rootElem）的，下载一段html代码并将其注入到这个div中。执行此操作后，它开始将事件附加到输入元素，构建诸如滑块等ui元素

好的，在将html注入DOM之后，生成的DOM应该相当于从html开始。结果证明jQuery的想法是相反的。具体来说，我首先注入html，然后开始查找和缓存选择器结果

以下代码块应该是等效的（做同样的事情）；将一段html（如

等待计算…

更改为

1234

之类的内容。而且，你瞧，如果我把所有的html放在同一个文档中（不是注入），它们实际上在做同样的事情

缓存选择器结果以供以后检索

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

每次都做选择

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

但是如果我将小部件的html代码移出主文档，并在处理它之前注入它，那么只有非缓存（后一个）版本可以工作。实际上，第一种方法似乎也能奏效。如果我在匿名函数中设置一个断点，我会看到一件奇怪的事情发生：

>   $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>

---

你能展示一下注入的代码吗？在文章的末尾添加。我发现了导致错误的原因：我两次注入相同的html。在创建选择器之前一次，然后第二次，从而覆盖第一次。真倒霉

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

<h1>Widget calculator</h1>

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

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

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