Question

我正试图理解“负载”＃39; jQuery中的事件，如下所述：http://api.jquery.com/load-event/。到目前为止，我一直无法触发它！

以下是一些示例代码。出现的唯一控制台消息是＆＃34; DOM READY＆＃34; - 不是一次加载调用。用.bind替换.load（）的调用（＆＃39; load＆＃39;，..）没有任何区别。

   <!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>

我做错了什么？

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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

它有很好的参考资料，而且我通过你的例子理解你想要保持简单，这就是你在这里找到的东西

Answer 4

我尝试复制你的例子，正如其他人所说，只有DOM READ被解雇了。

我还修改了脚本并试图加载img，a，div和script元素。没有被解雇。

我也试过传递窗口对象（在所有这个'窗口'事件之后。这确实有效。

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

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

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

jquery load事件从未触发过

4 个答案: