gpt4 book ai didi

javascript - 当我使用 jQuery 将事件处理程序添加到 html 中的对象时,是否必须调用 $.ready(function(){ ... })?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:52:55 27 4
gpt4 key购买 nike

我正在构建一个使用 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...
});
})

到目前为止,我习惯性地在 head 部分使用 script 标签。这就是我认为我应该使用 $.ready() 的原因,因为在 jquery 的文档示例中,将处理程序分配给对象是在加载对象之后完成的。

<!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()"

按钮属性。无需使任何事情复杂化。

最佳答案

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在绑定(bind)之前,这样无论脚本添加到哪里都是安全的。

如果您正在使用动态内容,或者只是不想添加 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', ...);

此格式会将事件监听器委托(delegate)给 document在执行时确实存在的对象。 jQuery 将在幕后处理上下文,以在第二个参数中提供的选择器的上下文中执行所有内容。


作为旁注,确保使用别名 jQuery$如果您计划将代码与其他库一起重用,请在使用前。 document.ready别名快捷方式是最好的方法之一:

jQuery(function ($) {
//document.ready
});

或者,使用一个自执行的闭包:

(function ($) {
//code here
}(jQuery));

关于javascript - 当我使用 jQuery 将事件处理程序添加到 html 中的对象时,是否必须调用 $.ready(function(){ ... })?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8417593/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com