带有load事件的jquery .on()方法

Question

我们怎样才能使用jQuery.事件的on()方法load？例如,代码是:

<a href="#" id="add">Add</a>
<div id="initial">
     <input type="text" class="abc" name="in">
</div>

和它的jQuery:

jQuery(document).ready(function() {
    var x=$('#initial').html();
    $('#add').click(function(){
        $('body').append(x);
    });
    $(document).on('load','.abc',function(){
        alert('started');
    });
});

Answer 1

请参阅http://api.jquery.com/on/

它说

在所有浏览器中,加载,滚动和错误事件(例如,在<img> 元素上)不会冒泡.在Internet Explorer 8及更低版本中,粘贴和重置事件不会冒泡.这些事件不支持与委托一起使用,但是当事件处理程序直接附加到生成事件的元素时,可以使用它们.

如果要在添加新输入框时执行某些操作,则可以在添加后简单地编写代码.

$('#add').click(function(){
        $('body').append(x);
        // Your code can be here
    });

如果您希望在加载文档中的第一个输入框时执行相同的代码,那么您可以编写一个函数并在两个位置调用它,即$('#add').click文档的就绪事件

Answer 2

我不确定你在这里要做什么 - 到时候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');

});?

如果您的代码似乎也暗示,您希望在.abc加载时触发警报,请将其放在单独的.load处理程序中:

jQuery(document).ready(function() {
    var x = $('#initial').html();
    $('#add').click(function() {
        $('body').append(x);
    });

    $(".abc").on("load", function() {
        alert('started');
    }
});?

最后,我看到jQuery在一个地方和$另一个地方使用的重点.通常最好保持代码的一致性,jQuery或者$在任何地方或任何地方使用,因为这两者通常是可以互换的.

Answer 3

运行函数 onLoad

jQuery(window).on("load", function(){
    ..code..
});

在 DOMContentLoaded 上运行代码（也称为 onready）

jQuery(document).ready(function(){
    ..code..
});

或 onready 的推荐简写

jQuery(function($){
    ..code.. ($ is the jQuery object)
});

onready 在文档加载时触发

当文档和所有相关内容（如页面上的图像）加载时触发 onload。