$(）.bind 在未准备好文档的情况下无法正常工作

$().bind not working without document ready

本文关键字：工作 情况下 常工作 文档 bind 未准备 准备好      更新时间：2023-09-26

使用$().bind时有必要使用$(document).ready()吗？

网页部分：

<head>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div style=''>
    <input type="text" id="sendie" value="Type your reply here and press Enter" class="inputBox"/>
</div>
</body>

JS部分

$("#sendie").bind("click",function(){
    console.log('log');
});

这是我用来测试的两段代码。如果我用 $(document).ready 包装 js 部分，它工作正常。

我担心的原因是我会在不同的元素上做很多键盘+鼠标绑定，如果我必须一直写一个$（）.ready，那将是乏味的（虽然我不介意这样做，但我只是好奇）。

$（document）.ready 是必要的吗？

我浏览了上面的帖子，它说，如果在 body tag 之前添加 ext js 文件$().ready则没有必要，但我仍然离不开它。请帮忙。

您的问题与绑定无关 - 在文档完全加载之前，jQuery 选择不起作用。原因很简单：直接在脚本标记中执行的代码在加载时执行。由于<script>在头部，因此它先于身体的任何内容。因此，当您的代码被执行时，还没有#sendie - 因此您无法设置其单击处理程序。

这个表达式...

$("#sendie")

。尝试在现有 DOM 中查找 ID 等于 'sendie' 的元素。如果它不存在（还不存在），则生成的jQuery对象将为空 - 并且相应的元素是否出现在那里，根本不重要，因为jQuery不会预测未来。

所以你拥有的替代方案是...

。将你调用的所有函数收集到一个更大的函数（或带有init方法的对象）中，然后在dom.ready上调用这个大函数（object.init（））。这不是必需的（这就是jQuery在幕后所做的），但它可能会帮助你更好地组织代码。

。使用委派：将所有事件处理程序绑定到document，然后在该"元处理程序"中路由操作。同样，只有当这个元处理程序是一个非常薄的"路由器"层，并且实际操作是在相应的模块/方法中完成时，这才有用。

如果你在

页面末尾包含你的js脚本，你不需要它（所以DOM元素已经加载了）：

<script type="text/javascript" src="test.js"></script>
</body>
相关文章：