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

发布于 2024-07-23 12:32:10 字数 919 浏览 2 评论 0原文

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() 之后才可访问提供任何解释或文档链接吗？这不是我经历过的事情，而且事实证明这很麻烦。

原文

(aggregated from another question)

Jquery 1.3.2 test code, run in 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>

Console output:

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

Can anybody offer any explanation or documentation links for hidden fields' data not being accessible until after $(document).ready()? It's not something I've ever experienced and it is proving troublesome.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

染墨丶若流云 2024-07-30 12:32:11

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

回复收藏 0 原文

那些过往 2024-07-30 12:32:11

如果我采用你的代码（并在上面添加 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 检索元素。

If I take your code (and add jQuery above) I get the same output. But if I change your code to the following, it will output the correct results. My guess is that firefox parses the HTML in a different order when no html/head/body is given.

<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>

But, as said above, wait for the document to be ready before trying to retrieve elements by ID.

回复收藏 0 原文

枯叶蝶 2024-07-30 12:32:11

document.ready 当页面“准备好”时，意味着完全呈现。
您的隐藏字段目前可能尚未在启动日志中呈现在页面上。

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

回复收藏 0 原文

只是我以为 2024-07-30 12:32:10

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

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

回复收藏 0 原文

北城孤痞 2024-07-30 12:32:10

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

当您创建以下 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>

Contrary to what others have written, your example should work as all major browsers allow access to elements which precede the executing script block. I don't have Firebug installed, but when replacing console.log() with document.writeln(), your example works as expected.

What happens when you create the following HTML document:

<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>

回复收藏 0 原文

~没有更多了~