javascript jquery .load 不检查我的元素是否已加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8583722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery .load isn't checking if my element is loaded
提问by Chris
I have this code
我有这个代码
<script type="text/javascript">
$("#main_photo_display").load(function(){
alert("loaded");
});
</script>
<div id="main_photo_display"></div>
I need it to do something once that div has loaded. Currently it does nothing. When I substitute window for "#main_photo_display" it works. I have googled and I keep coming across .load as how to check if a page element has been loaded.
一旦 div 加载完毕，我需要它做一些事情。目前它什么都不做。当我用 window 替换“#main_photo_display”时，它可以工作。我用谷歌搜索，我不断遇到 .load 如何检查页面元素是否已加载。
回答by Jasper
The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
当一个元素和所有子元素都被完全加载时，加载事件被发送到一个元素。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和 window 对象。
Source: http://api.jquery.com/load-event/
来源：http: //api.jquery.com/load-event/
Further down on the same page they state:
在同一页面的进一步下方，他们指出：
It doesn't correctly bubble up the DOM tree
它没有正确地冒泡 DOM 树
So you can't delegate this event, the event handler must be attached to the element on which the loadevent fires.
所以你不能委托这个事件，事件处理程序必须附加到load触发事件的元素上。
回答by Luke Stevenson
I don't think a DIV fires a loaded event. If there was a blank.gifimage within the DIV, you could attach the $.load()function to that.
我不认为 DIV 会触发加载的事件。如果blank.gifDIV 中有图像，您可以将$.load()函数附加到该图像上。
<div id="main_photo_display">
..... Other Content .....
<img class="loadcheck" src="blank.gif" width="0" height="0" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#main_photo_display img.loadcheck").load(function(){
alert("loaded");
});
});
</script>
回答by jfriend00
A plain div does not have a load event except when you are loading content into it with ajax (which I don't think is what you are doing here). If your code is physically located after the div in your page, then the div will be available and ready for your code to operate on it (you don't have to check anything).
普通 div 没有加载事件，除非您使用 ajax 将内容加载到其中（我认为这不是您在这里所做的）。如果您的代码实际位于页面中 div 之后，则 div 将可用并准备好让您的代码对其进行操作（您无需检查任何内容）。
If your code is located before the div in the page, then you can use jQuery's .ready()method to know when it is safe to access the div:
如果您的代码位于页面中的 div 之前，那么您可以使用 jQuery 的.ready()方法来知道何时可以安全地访问 div：
<script type="text/javascript">
$(document).ready(function() {
// safe to access $("#main_photo_display") here
});
</script>
<div id="main_photo_display"></div>
回答by Indranil
Or you can run the script after the DOM is ready like so:
或者您可以在 DOM 准备好后运行脚本，如下所示：
<script type="text/javascript">
$(document).ready(function() {
$("#main_photo_display").load(function(){
alert("loaded");
});
});
</script>
<div id="main_photo_display"></div>
Sorry I think I read it wrong :) You need this:
对不起，我想我读错了:) 你需要这个：
<script type="text/javascript">
$(document).ready(function() {
alert('loaded');
});
</script>
回答by lonesomeday
You can't do that: loadevents are not fired on just any HTML element, only on those that require loading an external resource.
你不能这样做：load事件不会在任何 HTML 元素上触发，只在那些需要加载外部资源的元素上触发。
The best way to ensure the element is loaded is to put the scripttag after it in the markup.
确保元素被加载的最好方法是将script标签放在标记之后。
<div id="main_photo_display"></div>
<script type="text/javascript">
alert("loaded");
</script>
The Javascript will not be run before the divis parsed.
Javascript 在div解析之前不会运行。
回答by zogby
I have a sort of workaround, and it is sloppy (please comment out if you have notes).
我有一种解决方法，而且很草率（如果有注释请注释掉）。
It is useful when you have a javascript out of your control which appends elements to your dom on a page load.
当您有一个 javascript 超出您的控制范围时，它会在页面加载时将元素附加到您的 dom 中时，这很有用。
$(function () {
var counter = 0;
var intervalId = setInterval(function () {
$(document).mouseover()
}, 105);
var unbind = function () {
$(document).off('mousemove', '#label');
$(document).off('mouseover');
window.clearInterval(intervalId);
};
$(document).mouseover(function () {
$('#label').trigger('mousemove');
counter++;
if (jivositecounter > 200) unbind();
});
$(document).on('mousemove', '#label', function () {
console.log(counter);
...doing our stuff when #label appears
unbind();
});
});
