$(document).ready(function() vs .click(function()

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

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

你的 getJSON(( 函数在加载 dom 后触发！

在你的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()( 完成，因此在填充页面之前触发 ready 事件，并且要操作的元素尚不存在。

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

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