Question

我遇到了一个相当奇怪的问题，其中.html（）方法在（文档）.ready中工作，将文本框写入.anchor1，而外部（文档）.ready，.html（）方法尝试将“c”和“d”写入.anchor2（近似等效的锚1）不做任何事情。 “a”正被记录到控制台，尽管事实上它与行“$（”。anchor2“）。”html（“c”）;“相同的”if“语句。为什么会这样？

相关HTML：

<div class="anchor1">y</div>
<div class="anchor2">z</div>

和JavaScript：

$(document).ready(function(){

    $(".anchor1").html("<textarea></textarea>");

    $('#menu1').on("menuselect", function (event, ui) {
        var value1 = $("#menu1 option:selected").text();
        var value2 = $("#menu2 option:selected").text();
    });
    hourly1 = $(".amount").val()
});

value1 = "weekly earnings";
value2 = "annual salary";

function switch1() {
    value1 = $("#menu1 option:selected").text();;
}

function switch2() {
    value2 = $("#menu2 option:selected").text();
}
$(".anchor2").html("d");
if (((value1 == "weekly earnings") && (value2 == "annual salary")) || ((value2 == "weekly earnings") && (value1 == "annual salary"))) {
    $(".anchor2").html("c");
    console.log("a");
}

Answer 1

这种情况正在发生，因为当您的JavaScript执行时，“。anchor2”div不会在DOM中呈现。 $（document）.ready确保你的DOM准备就绪，然后执行回调中编写的代码。如果您不想使用$（document）.ready将所有js移动到页面底部。

即在结束"</body>"标记之前。在这种情况下，您的HTML将被渲染并且$（“。anchor2”）。html（“d”）;代码在DOM中找到.anchor2 div。因此能够将innerHTML添加到div。

希望这能解决你的问题。

Answer 2

console.log("a");正在运行，因为它与jQuery没有任何关系。它也适用于普通的JavaScript。

您应该在$(".anchor2")内编写与$(document).ready()相关的代码，或者在JavaScript中编写代码而不是jQuery，例如。

document.getElementsByClassName("anchor2")[0].innerHTML = 'c'; //whatever you want

jQuery .html（）方法在（document）.ready内部工作但不在外部

2 个答案: