$()。绑定没有文档准备好工作

时间:2013-11-06 18:43:28

标签: javascript jquery html event-handling

在使用$()。bind ??

时,是否有必要使用$(document).ready()

HTML部分

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

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

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

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

Is $(document).ready necessary?

我浏览了上面的帖子,它说,如果在身体标签之前添加了ext js文件,$()。ready是没有必要的,但是我仍然离不开它。请帮助。

3 个答案:

答案 0 :(得分:3)

这个表达......

$("#sendie")

...尝试在现有 DOM中查找ID等于'sendie'的元素。如果它还没有(那么),那么生成的jQuery对象将是空的 - 相应的元素是否会出现在那里,根本不重要,因为jQuery不会预测未来。

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

...将您调用的所有函数收集到更大的函数(或使用init方法的对象),然后在dom.ready上调用此大函数(object.init())。这不是必要的(这就是jQuery在幕后所做的事情),但它可以帮助您更好地组织代码。

... use delegation:将所有事件处理程序绑定到document,然后在“元处理程序”中路由操作。同样,只有当这个元处理程序是一个非常薄的“路由器”层,并且真正的操作在相应的模块/方法中完成时,这才有用。

答案 1 :(得分:3)

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

答案 2 :(得分:1)

如果在页面末尾包含js脚本,则不需要它(因此DOM元素已经加载):

<script type="text/javascript" src="test.js"></script>
</body>