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

Question

我使用jQuery从DOM中选择一个(唯一的)ID:

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

当页面仍然是白色时触发警报(我不知道它是否改变了什么),并且没有选择任何内容(len为0).

当我在控制台中复制/粘贴警报时,当网站"可视"准备好时,警报会给出"长度:1"作为结果.

由于某些原因,document.ready或选择器都不起作用.

我使用jQuery 3.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)
});

或简写代码(就像每个好的开发人员都使用)):

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