当我使用jQuery向html中的对象添加事件处理程序时，是否必须调用$.ready(function(){ . })？
当我使用jQuery向html中的对象添加事件处理程序时，是否必须调用$.ready(function(){ . })？
提问于 2011-12-07 15:12:50
我正在构建一个使用jQuery分配事件处理程序的页面。现在，我将onclick事件分配给函数，但是页面是运行脚本，然后构造HTML，还是页面构造HTML，然后运行脚本？
<script type="text/javascript">
function opinionbyid(popinionid){
$.post("index.php", {"opinionid":popinionid}, function(data){
var data2 = JSON.parse(data);
$(".opinion").html(data2.opinion);
$(".note").html(data2.note);
}, "json");
}
function loginform() { $(".middle").html($(".loginform").html()); }
function registerform() { $(".middle").html($(".registerform").html()); }
function opinionpostform() {};
$("#loginbutton").click(function(){
//UNSURE, MAYBE I SHOULD DO IT IN $.ready(function(){ HERE }))
});
</script>喜欢
$.ready(function(){
$("#loginbutton").click(function(){
// code...
});
})到目前为止，我习惯于在头部分使用脚本标记。这就是我认为应该使用$.ready()的原因，因为在jquery的文档示例中，将处理程序分配给obect是在加载对象之后完成的。
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; margin:5px; cursor:pointer; }
p.hilite { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
<script>
$("p").click(function () {
$(this).slideUp();
});
$("p").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});
</script>
</body>
</html>解决方案编辑之后:最后，我想“我为什么要用脚本来处理这些事件呢？”现在我用
onClick="dosomething()"关于按钮属性。没必要让事情复杂化。
Stack Overflow用户
回答已采纳
发布于 2011-12-07 15:18:30
HTML页面是自上而下解析的。解析JS会阻止HTML的解析，直到JS被执行为止：
<div id="foo">Foo</div>
<script>
$('#foo').click(..) //will work because #foo exists in the dom already
$('#bar').click(..) //wont work because #bar doesn't exist in the dom yet
</script>
<div id="bar">Bar</div>如果您在</body>之前附加脚本，那么您就不需要等待document.ready了，因为实际上您已经在那里了。
如果要在<head>中附加脚本，则需要等待document.ready，因为在执行代码时不会解析任何DOM。
如果您正在编写模块化代码，并且不确定它将被添加到哪里，那么在绑定之前等待document.ready，这样无论脚本在哪里添加，它都是安全的。
如果您正在处理动态内容，或者根本不想添加document.ready处理程序，则可以使用live (在1.7岁时已不再推荐)或使用on
//pre 1.7
$('#foo').live('click', ...);
$('#bar').live('click', ...);
//post 1.7
$(document).on('click', '#foo', ...);
$(document).on('click', '#bar', ...);此格式将将事件侦听器委托给执行时确实存在的document对象。jQuery将在幕后处理上下文，以执行第二个参数中提供的选择器上下文中的所有内容。
另外，如果您计划将代码与其他库一起重用，请确保在使用之前将jQuery化名为$。document.ready混叠快捷方式是最好的方法之一：
jQuery(function ($) {
//document.ready
});或者，使用自动执行的闭包：
(function ($) {
//code here
}(jQuery));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8417593
复制相关文章
相似问题
腾讯云开发者
