2

我试图理解 jQuery 中的“加载”事件，如下所述：http: //api.jquery.com/load-event/。到目前为止，我什至一次都无法触发它！

这是一些示例代码。出现的唯一控制台消息是“DOM READY”——不是单个加载调用。用 .bind('load',..) 替换对 .load() 的调用没有任何区别。

   <!DOCTYPE html>
   <html>
   <head>
          <script src="lib/jquery.min.js"></script>
          <script>
           $(function(){
              console.log("DOM READY");
           });
           $(document).load(function(){
              console.log("Document Loaded");
           });
           $('#foo').load(function(){
              console.log("foo loaded");
           });
           $('#bar img').load(function(){
              console.log('image loaded');
           });
           $('#bar').load(function(){
              console.log('bar loaded');
           });
           </script>
   </head>
   <body>
     <div id="foo">Hellow world</div>
     <div id="bar">
        <img src="pics/pig.png"/>
     </div>
   </body>
   </html>

我究竟做错了什么？

4

4 回答 4

7

您不能绑定到尚不存在的项目。例如，当您执行以下操作时：

$('#foo').load(function(){
    console.log("foo loaded");
});

该#foo项目不存在，因此您无法绑定到其加载事件。另请注意文档对.load事件本身的说明：

此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和窗口对象。

您的 div 元素不会“加载”。

于 2012-06-07T19:23:39.157 回答
1

如果您使用 document.ready 事件进行绑定，则可以保证元素存在：

$(document).ready(function(){
    $('#foo').load(function(){console.log("foo loaded");});
}
于 2012-06-07T19:27:34.923 回答
0

正如乔纳森所说。如果您想要一个示例，我建议您查看本网站中的文档：http: //api.jquery.com/ready/

它有很好的参考资料，而且我通过你的例子了解到你想让它保持简单，所以你会在这里找到

于 2012-06-07T19:32:05.303 回答
0

我尝试复制您的示例，并且如其他人所述，仅触发了 DOM READ 一个。

我还修改了脚本并尝试让负载在 img、a、div 和脚本元素上工作。没有人开枪。

我还尝试传入窗口对象（毕竟这是一个“窗口”事件。这确实有效。

我的结论是，尽管有 jquery 文档，但它仅适用于 window 对象：

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

我只测试了 chrome 并且只测试了我提到的元素。我个人只会使用 document.ready 功能。根据文档 .load with images 无论如何都不能很好地工作。这个特殊功能有很多注意事项：

于 2012-06-07T20:11:36.750 回答