$（文件）。就绪（函数（）VS。点击（

我有一个填充了这是工作的一个完美$ .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我。就绪（）函数的工作。

Cheers Jeff

来源

2017-07-25 Jeff

“准备就绪”处理程序中的代码在页面完成时触发。 “click”处理程序中的代码仅在您点击鼠标时触发。你的'.getJSON（）'是异步的，所以如果页面在响应返回之前完成，第一个将不起作用。 – Pointy

什么是数据？写入DOM的内容是从JSON中生成的#one，#two，＃third，＃four元素吗？ – Bergi

数据变量是在查询字符串中传递给页面的内容，并且是从JSON文件将元素写入到DOM中。 – Jeff

当你的dom页面被加载时，ready事件被激发。

你的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); 
});

来源

2017-07-25 23:33:00 Superdrac

非常感谢，我有一些想法，这是与DOM有关，但不确定的解决方案，它完美的作品:) – Jeff

$(document).ready()不等待您的异步调用（$.getJSON()）来完成的，所以已填充页面之前准备事件被触发，你要处理的元素还不存在。

当你硬编码工作，因为它没有等待异步请求的数据来完成和页面被立即填充。

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

来源

2017-07-25 23:35:14

$（文件）。就绪（函数（）VS。点击（

回答

相关问题