Question

我的代码旨在迭代x次，每次都将一段HTML插入div。

我的主要HTML看起来像这样：

<body>
    <h1>Main Page Test Title</h1>
    <div class="container ">
        <div id="button_list">

        </div>
    </div>
</body>

我想在循环的每次迭代中加载的HTML是：

<button class=' btn-block btn-lg'>
    <div class='col-md-4'>
        <img class="img_class" src='test.png' height='144' width='192'>
    </div>
    <div class='col-md-8'>
        <h3 class="h3_class">Test Title</h3>
        <p class="p_class">Test, Test, Test keyword, Key, Word</p>
    </div>
</button>

我使用的代码是：

$(document).ready(function () {
    for(var i = 0;i<5;i++){
        var $var = $('<div id="rbtn' + i +'">').load("button_template.html");
        $("#button_list").append($var);

        $var2 = $('#rbtn' + i);
        $var3 = $var2.find('h3');
    }
});

当我运行此代码时，按钮正确填充到主页面，$var2 = $('#rbtn' + i)选择器确实返回一个对象，但是附加$var3 = $var2.find('h3')返回一个空对象。当我在谷歌铬调试模式下运行代码，并使用控制台查看$ var2的值时，我看到正确的对象。如果在控制台模式下我手动输入$var2.find('h3');我也会得到正确的对象。但是，当我在代码中执行相同的操作时，它不起作用。

Answer 1

您陷入了异步代码的经典问题。您正在使用#rbtn函数填充$.load() - div的内容。此函数从服务器加载数据，并在加载过程完成后立即将内容插入#rbtn div。

但是，加载数据不是一个即时过程，即它会在稍后的某个时刻结束。由于Javascript代码不是同步的，因此在调用$.load()之后，您在调用$.load()之后直接评估的语句将在不等待结果的情况下进行评估。它在您的Chrome控制台中运行的原因很简单，就是在您已经加载所有内容时提前评估您的语句。

因此，当您尝试访问'<div id="rbtn' + i +'">'的内容时，它们可能还不包含h3，因为加载操作尚未完成。

执行此操作的正确方法是推迟$var3 = $var2.find('h3')操作，直到$.load()操作完成。为此，您可以将第三个函数参数用于$.load()，这是专为此目的而设计的回调函数。作为.load( url [, data ] [, complete ] )状态的jQuery-Docs，您应该重新构建代码以包含回调，例如

...
.load("button_template.html", function() {
  // this function will be executed as soon as the html template has been loaded and injected
})
...

Answer 2

$ .load（）是异步函数。当代码遇到find（“h3”）时，你的templ还没有加载。您应该在回调函数中执行此操作。

xxx.load("xxx.html", function(){
  xx.find("h3").text("xxx");
});

Answer 3

确保在设置之前实例化变量。你实例化了$ var，但没有实例化$ var2和$ var3（除非你把它们设置为在你提供的代码中没有出现的地方的全局变量）。

$(document).ready(function () {
    for(var i = 0;i<5;i++){
        var $var = $('<div id="rbtn' + i +'">').load("button_template.html");
        $("#button_list").append($var);

        var $var2 = $('#rbtn' + i),
        $var3 = $var2.find('h3');
    }
});

.find（）在调试控制台中返回对象，但不在代码

3 个答案: