Question

我有一个填充了$ .getJSON（）函数的页面，该函数运行正常，JSON正在正确写入DOM但是我有另一个函数可以切换页面上元素的显示（如果有的话）匹配查询字符串中的值。

$(document).ready(function () {
    $("#one").toggle(data.indexOf("one") !== -1);
    $("#two").toggle(data.indexOf("two") !== -1);
    $("#three").toggle(data.indexOf("three") !== -1);
    $("#four").toggle(data.indexOf("four") !== -1);
});

如果我使用任何其他事件来触发该功能，则会在页面上隐藏/显示正确的元素。

$(document).click(function () {
    $("#one").toggle(data.indexOf("one") !== -1);
    $("#two").toggle(data.indexOf("two") !== -1);
    $("#three").toggle(data.indexOf("three") !== -1);
    $("#four").toggle(data.indexOf("four") !== -1);
});

有人可以解释为什么.ready（）函数不起作用吗？

有趣的是，使用$ .getJSON（）函数加载页面内容似乎与它有关，因为如果我对HTML进行硬编码，那么我的.ready（）函数就可以工作。

干杯杰夫

Answer 1

加载dom页面时会触发ready事件。

加载dom后会触发你的getJSON（）函数！

为您的getJSON代码添加一个更改它的承诺。

.getJSON().then(function() {
   $("#one").toggle(data.indexOf("one") !== -1);
   $("#two").toggle(data.indexOf("two") !== -1);
   $("#three").toggle(data.indexOf("three") !== -1);
   $("#four").toggle(data.indexOf("four") !== -1);
});

Answer 2

$(document).ready()不等待您的异步调用（$.getJSON()）完成，因此在填充页面之前触发就绪事件，并且您想要操作的元素尚不存在

当您对其工作的数据进行硬编码时，因为它不必等待异步请求完成，并且页面会立即填充。

最简单的解决方案是在页面被$.getJSON()调用的回调函数填充后立即调用事件处理函数。希望你已经在回调函数中有一些机制，以确保如果请求在ready事件被触发之前完成，它就不会填充页面。

$（document）.ready（function（）vs .click（function（）

2 个答案: