个人中心
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
文章推荐： JavaScript。一个奇怪的赋值语句
文章推荐： android - 从溢出菜单进入/退出动画中删除额外的背景颜色矩形？
文章推荐： javascript - 如何从 JSON 对象转换为元素形式？
文章推荐： javascript - 从逗号分隔的对象中获取第一项
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com