Question

我正在使用visual studio学习jQuery并在Chrome浏览器中测试我的代码。这是我的HTML代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="jquery-3.1.0.js"></script>

    <script type="text/javascript">
        $(window).load(function () {
            alert("Window Loaded");
        });
    </script>
</head>
<body>

</body>
</html>

这是我的解决方案资源管理器

现在为什么我的浏览器没有提醒“window Loaded”？

Answer 1

您正在使用jQuery版本3.1.0，并且自jQuery版本1.8以来不推荐使用load事件。加载事件已从jQuery 3.0中删除。相反，您可以使用on方法绑定JavaScript load event：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="catcher">
    <td>
      <span>
          <button onclick="alert('it works!');">Button</button>
      </span>
    </td>
  </tr>
</table>

Answer 2

<script type="text/javascript">
   $(window).ready(function () {
      alert("Window Loaded");
   });
</script>

Answer 3

in jquery-3.1.1

$("#id").load(function(){
//code goes here});

将无效，因为加载功能不再起作用

Answer 4

我不得不单独编写一个完整的答案，因为很难在第二个答案中添加这么长时间的评论。

很抱歉，但是上面的第二个答案不正确。

以下三种情况将说明我的观点：

方案1：：在不赞成使用以下方法之前，

  $(window).load(function () {
     alert("Window Loaded.");
  });

如果我们执行以下两个查询：

<script>
   $(window).load(function () {
     alert("Window Loaded.");
   }); 

   $(document).ready(function() {
     alert("Dom Loaded.");
   });
</script>,

第二个查询的警报（已加载Dom）将首先显示，而第一个查询的警报（已加载Window）将随后显示。

方案2：但是，如果我们执行以下两个查询，如上面的第二个答案所示：

<script>
   $(window).ready(function () {
     alert("Window Loaded.");
   }); 

   $(document).ready(function() {
     alert("Dom Loaded.");
   });
</script>,

第一个查询的警报（已加载窗口）将首先显示，第二个查询的警报（已加载窗口）将稍后显示，这不对。

方案3：另一方面，如果我们执行以下两个查询，则会得到正确的结果：

<script>
   $(window).on("load", function () {
     alert("Window Loaded.");
   }); 

   $(document).ready(function() {
     alert("Dom Loaded.");
   });
</script>,

也就是说，将首先显示第二个查询的警报（已加载Dom。），然后将显示第一个查询的警报（已加载窗口），即< strong> RIGHT 结果。

简而言之，第一个答案是正确的答案：

$(window).on('load', function () {
  alert("Window Loaded.");
});

为什么$（window）.load（）在jQuery中不起作用？

4 个答案: