什么会导致 jQuery 选择器在 document.ready 之后从控制台工作时失败？

Question

我使用 jQuery 来 select 来自 DOM 的（唯一）ID :

$(document).ready(
    alert("length :" +$("#btn").length)
);

当页面仍然是白色时触发警报（我不知道它是否有任何变化）并且没有 selected（len 为 0）。

当我在控制台中 copy/paste 警报时，当站点 "visually" 就绪时，警报给出 "length :1" 作为结果。

由于某些原因，document.ready 或 selector 不起作用。

我用的是jQuery3.2.1.

按钮本身是这样的：

<ul class="nav navbar-nav">
    <li class="active"><a href="#">abc</a></li>
    <li><button class="btn btn-primary" type="button" id="btn">said button</button></li>
</ul>

Answer 1

我们必须在内部传递匿名函数或命名函数（回调）以使其正常工作，即在 DOM 加载完成后。

试试这个：

$(document).ready(function(){
             //----^^^^^^^----------- here
   alert("length :" +$("#btn").length)
});

或 shorthand 代码（就像所有优秀的开发人员都使用的那样））：

$(function(){
   alert("length :" +$("#btn").length)
});

$(document).ready(function(){
       alert("length :" +$("#btn").length)
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
    <li class="active"><a href="#">abc</a></li>
    <li><button class="btn btn-primary" type="button" id="btn">said button</button></li>
</ul>

什么会导致 jQuery 选择器在 document.ready 之后从控制台工作时失败？

What can cause jQuery selector to fail after document.ready when it works from console?

javascript

jquery

selector

document-ready