使用jQuery的.on()方法与load事件

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');
    });
});

- Anand mohan sinha

---

还有什么问题或疑问吗？ - Jashwant

我认为用户可能在询问此问题，即在他的实际项目中，元素.abc是由外部库动态创建的。也就是说，当元素.abc被添加到DOM时，他无法控制它。 - Ashwin

@Anand Mohan Sinha：这就是你犯错的地方 --> $(document).on('load', '.abc', handler)。你选择的答案完全只涉及.click()处理程序？你怎么能接受它是正确的呢？ - HoldOffHunger

Answer 1

请参考http://api.jquery.com/on/。

它说：

在所有浏览器中，load、scroll和error事件（例如在元素上）不会冒泡。在Internet Explorer 8及以下版本中，paste和reset事件不会冒泡。这些事件不支持委托使用，但可以在事件处理程序直接附加到生成事件的元素时使用。

如果您想在添加新输入框时执行某些操作，则可以在附加后直接编写代码。

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

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

- Imdad

---

这是一条不错的信息，但可惜与主题无关，依我看。 - Elliot Bonneville

这怎么说不相关呢？如果载入事件无法冒泡到文档层级，那么这就很好地解释了为什么你不能使用$(document).on("load", ".something", ...)。相反，这是一个非常相关的答案。 - md1337

Answer 2

运行函数onLoad

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

为了在DOMContentLoaded事件（也称为onready事件）发生时运行代码

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

或者是onready的推荐简写方式

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

当文档加载完毕时，onready事件会被触发。

当文档及其相关内容（如页面上的图像）全部加载完毕时，onload事件会被触发。

- Timo Huovinen

Answer 3

我不确定你想要什么 - 在执行jQuery(document).ready()的时候，页面已经加载完成了，因此document的load事件已经被调用过了。此时添加load事件处理程序将没有任何效果，也永远不会被调用。如果你想在文档加载完后弹出“已启动”，只需像这样在(document).ready()中直接放置它：

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

如果你的代码表明，你想在 .abc 加载完成后触发 alert，请将其放在独立的 .load 处理程序中：

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

最后，我认为在一个地方使用jQuery而在另一个地方使用$没有什么意义。通常最好保持你的代码一致，要么在所有地方都使用jQuery，要么在所有地方都使用$，因为这两个通常可以互换使用。

- Elliot Bonneville

---

@Jashwant：没错。如果在load事件之前已经执行了ready，那么在ready触发后将load事件附加到文档上就是多余的。 - Elliot Bonneville

@Imdad - jQuery 1.8文档：".load(handler(eventObject)) ...是.on('load', handler)的快捷方式。"自2012年8月起可用，从6月份开始有beta版本，我认为在1.7以下也是可用的，所以你可以点赞。 - Jeffz

Answer 4

可以这样做：

jQuery(document).on('change', '#my_id', function() {
    // Your code can be here
})

jQuery('#my_id').change();

针对您的情况

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

    $(document).on('change','.abc',function(){
        alert('started');
    // Your code can be here
    });

    $('.abc').change();
});

- Jose Paez

Answer 5

如其他人所提到的，load事件不会冒泡。相反，您可以使用自定义事件手动触发类似于load的事件：

$('#item').on('namespace/onload', handleOnload).trigger('namespace/onload')

如果您的元素已经在监听一个change事件：

$('#item').on('change', handleChange).trigger('change')

我发现这个方法很有效。虽然，我坚持使用自定义事件来更明确地避免副作用。

- png