jquery 隐藏字段在调用 $(document).ready() 之前无法访问答案

【问题标题】：jquery hidden field not accessible until $(document).ready() calledjquery 隐藏字段在调用 $(document).ready() 之前无法访问
【发布时间】：2010-11-03 02:16:57
【问题描述】：

(aggregated from another question)

jquery 1.3.2 测试代码，在FF3中运行：

<input type="hidden" value="236434" id="ixd" name='ixd' />

<script>
console.log( $('#ixd').val() );

console.log( $('#ixd') );
console.log( $("input[name='ixd']") );
console.log( $("input:hidden") );

console.log( $("input[name='ixd'][type='hidden']") );
console.log( $("input[name='ixd']").val() );

$(document).ready(function() {
    console.log( $('#ixd').val() );
    console.log( $('#ixd') );
    console.log( $("input[name='ixd']") );
    console.log( $("input:hidden") );
});
</script>

控制台输出：

undefined
[]
[]
[]
[]
undefined
236434
[input#ixd 236434]
[input#ixd 236434]
[input#ixd 236434]

任何人都可以为隐藏字段的数据提供任何解释或文档链接，直到 $(document).ready() 之后才能访问？这不是我曾经经历过的事情，而且很麻烦。

【问题讨论】：

听起来您几乎是在问，“为什么文档在准备好之前还没有准备好？”
嗯？您没有尝试在“声明”后立即访问脚本中的 DOM 元素吗？通常很好的夹头。
我尝试将几乎所有脚本保存在外部文件中，以便在动态生成页面内容的其余部分时它们可以被浏览器缓存。所以不，我没有尝试在 dom-ready 事件之前从脚本访问 DOM 元素，我认为这样做不是一个好主意。

标签： jquery forms css-selectors element hidden

【解决方案1】：

与其他人所写的相反，您的示例应该可以工作，因为所有主要浏览器都允许访问执行脚本块之前的元素。我没有安装 Firebug，但是将 console.log() 替换为 document.writeln() 时，您的示例按预期工作。

当您创建以下 HTML 文档时会发生什么：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<input type="hidden" value="236434" id="ixd">
<pre><script type="text/javascript">
document.writeln($('#ixd').val());
document.writeln(document.getElementById('ixd').value);
</script></pre>

【讨论】：

克里斯托夫，感谢您的回答和工作示例。当考虑到 miguelle 的回答（添加和标签）的上下文时，似乎 firebug 的控制台存在与 console.log 或未在有效 HTML 中声明的隐藏元素的解析相关的错误。

【解决方案2】：

嗯，我猜你回答了你自己的问题。使用 document.getElementById() 需要浏览器加载 DOM 树，以便 DOM API（包括 getElementById）工作。

这意味着在调用 $(document).ready 函数之前，您无法确定任何 getElementById 调用都能正常工作。查看http://dean.edwards.name/weblog/2005/02/order-of-events/了解更多信息

【讨论】：

getElementById() 应该适用于脚本之前的所有元素
为什么这个答案被修改了？这是不正确的，并且引用了一篇 4 年前的文章，可能是针对不同的 JS 版本。 Christoph 是正确的——通常可以引用
@Andy：如果您对所谓的 onload-problem 感兴趣（除了在角落里已经解决得很好，那么参考文章（检查它的后续内容！）仍然是一个不错的读物案例）；它只是与您的问题无关；）
@Christoph 我通常从不使用 $(document).ready()，而是将 HTML 与 JS 散布，因为它似乎可以减少页面加载时间（值得进行基准测试！）。这合理吗？
@Andy：它可能不会减少整体加载时间，但可能会导致更好的响应；在 yahoo 和 alistpart 上有一些关于此类事情的好文章。内联脚本通常不受欢迎，因为它破坏了行为分离（一种不引人注目的脚本教条）；尽量避免完全需要 onload-actions - 如果启用了 js，事件委托和在 html 或 body 上设置单个类可能会有很长的路要走

【解决方案3】：

document.ready 当页面“就绪”时，表示完全渲染。您的隐藏字段可能尚未在开始日志中呈现在页面上。

使用 ready() 开始操作页面元素，而不是在那之前，“这是唯一确定的方法”:)

【讨论】：

【解决方案4】：

如果我采用您的代码（并在上面添加 jQuery），我会得到相同的输出。但是，如果我将您的代码更改为以下内容，它将输出正确的结果。我的猜测是，当没有给出 html/head/body 时，firefox 会以不同的顺序解析 HTML。

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
</head>
<body>
<input type="hidden" value="236434" id="ixd" name='ixd' />

<script>
console.log( $('#ixd').val() );

console.log( $('#ixd') );
console.log( $("input[name='ixd']") );
console.log( $("input:hidden") );

console.log( $("input[name='ixd'][type='hidden']") );
console.log( $("input[name='ixd']").val() );

$(document).ready(function() {
    console.log( $('#ixd').val() );
    console.log( $('#ixd') );
    console.log( $("input[name='ixd']") );
    console.log( $("input:hidden") );
});
</script>

</body>
</html>

但是，如上所述，在尝试按 ID 检索元素之前，请等待文档准备好。

【讨论】：

感谢 miguelle，这确实是正确的！正如推测的那样，firebug 的控制台似乎存在与 console.log 或解析未在有效 HTML 中声明的隐藏元素有关的错误。

【解决方案5】：

在 dom 准备好之前，你不应该相信任何东西。这就是事情的运作方式。等待准备好有问题吗？

【讨论】：

是的，即在 DOM 完成加载之前触发 ajax 调用（插入/更新 DOM “占位符”元素）