带有加载事件的 jquery .on() 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11425158/
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 .on() method with load event
提问by Anand mohan sinha
How can we use jQuery .on()method with loadevent? e.g. The code is:
我们如何使用 jQuery 。on()带load事件的方法？例如代码是：
<a href="#" id="add">Add</a>
<div id="initial">
<input type="text" class="abc" name="in">
</div>
And the jQuery for it:
以及它的 jQuery：
jQuery(document).ready(function() {
var x=$('#initial').html();
$('#add').click(function(){
$('body').append(x);
});
$(document).on('load','.abc',function(){
alert('started');
});
});
采纳答案by Imdad
Refer to http://api.jquery.com/on/
It says
它说
In all browsers, the load, scroll, and error events (e.g., on an
<img>element) do not bubble. In Internet Explorer 8 and lower, the paste and reset events do not bubble. Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element generating the event.
在所有浏览器中，加载、滚动和错误事件（例如，在
<img>元素上）不会冒泡。在 Internet Explorer 8 及更低版本中，粘贴和重置事件不会冒泡。此类事件不支持与委托一起使用，但当事件处理程序直接附加到生成事件的元素时，可以使用它们。
If you want to do something when a new input box is added then you can simply write the code after appending it.
如果您想在添加新输入框时执行某些操作，则只需在附加后编写代码即可。
$('#add').click(function(){
$('body').append(x);
// Your code can be here
});
And if you want the same code execute when the first input box within the document is loaded then you can write a function and call it in both places i.e. $('#add').clickand document's ready event
如果您希望在加载文档中的第一个输入框时执行相同的代码，那么您可以编写一个函数并在两个地方调用它，即$('#add').click和文档的就绪事件
回答by Elliot Bonneville
I'm not sure what you're going for here--by the time jQuery(document).ready()has executed, it has already loaded, and thus document's load event will already have been called. Attaching the loadevent handler at this point will have no effect and it will never be called. If you're attempting to alert"started" once the document has loaded, just put it right in the (document).ready()call, like this:
我不确定你在这里要做什么——到时间jQuery(document).ready()已经执行，它已经加载，因此document的 load 事件将已经被调用。此时附加load事件处理程序将不起作用，并且永远不会被调用。如果您在alert文档加载后尝试“开始”，只需将其放在(document).ready()调用中，如下所示：
jQuery(document).ready(function() {
var x = $('#initial').html();
$('#add').click(function() {
$('body').append(x);
});
alert('started');
});?
If, as your code also appears to insinuate, you want to fire the alert when .abchas loaded, put it in an individual .loadhandler:
如果，正如您的代码所暗示的那样，您想在.abc加载时触发警报，请将其放入单独的.load处理程序中：
jQuery(document).ready(function() {
var x = $('#initial').html();
$('#add').click(function() {
$('body').append(x);
});
$(".abc").on("load", function() {
alert('started');
}
});?
Finally, I see little point in using jQueryin one place and $in another. It's generally better to keep your code consistent, and either use jQueryeverywhere or $everywhere, as the two are generally interchangeable.
最后，我认为jQuery在一个地方和$另一个地方使用没什么意义。通常最好保持您的代码一致，并在任何jQuery地方或$任何地方使用，因为两者通常可以互换。
回答by Timo Huovinen
To run function onLoad
运行函数 onLoad
jQuery(window).on("load", function(){
..code..
});
To run code onDOMContentLoaded (also called onready)
在 DOMContentLoaded 上运行代码（也称为 onready）
jQuery(document).ready(function(){
..code..
});
or the recommended shorthand for onready
或 onready 的推荐简写
jQuery(function($){
..code.. ($ is the jQuery object)
});
onready fires when the document has loaded
onready 在文档加载时触发
onload fires when the document and all the associated content, like the images on the page have loaded.
当文档和所有相关内容（如页面上的图像）加载时触发 onload。
回答by Solvitieg
As the other have mentioned, the load event does not bubble. Instead you can manually trigger a load-like event with a custom event:
正如其他人提到的，加载事件不会冒泡。相反，您可以使用自定义事件手动触发类似加载的事件：
$('#item').on('namespace/onload', handleOnload).trigger('namespace/onload')
If your element is already listening to a changeevent:
如果您的元素已经在监听change事件：
$('#item').on('change', handleChange).trigger('change')
I find this works well. Though, I stick to custom events to be more explicit and avoid side effects.
我觉得这很好用。不过，我坚持使用自定义事件来更加明确并避免副作用。
