带有加载事件的 jquery .on() 方法答案

【问题标题】：jquery .on() method with load event带有加载事件的 jquery .on() 方法
【发布时间】：2012-07-11 03:34:40
【问题描述】：

我们如何使用带有load 事件的jQuery .on() 方法？例如代码是：

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

【问题讨论】：

问题是什么？
我想用户可能会问这个问题，在他的实际项目中，元素.abc 是由外部库动态创建的。即，当元素 .abc 附加到 DOM 时，他无法控制。
@Anand Mohan Sinha：这就是你出错的地方 --> $(document).on('load', '.abc', handler)。您选择的答案是完全关于 .click() 处理程序？你怎么能接受它是正确的？

标签： jquery events

【解决方案1】：

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

它说

在所有浏览器中，加载、滚动和错误事件（例如，在 <img> 元素）不要冒泡。在 Internet Explorer 8 及更低版本中，粘贴并且重置事件不会冒泡。不支持使用此类事件带委托，但可以在事件处理程序启动时使用直接附加到产生事件的元素上。

如果你想在添加新的输入框时做一些事情，那么你可以简单地在添加后编写代码。

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

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

【讨论】：

这是一个很好的信息，但不幸的是无关紧要，恕我直言。
这有什么不相干的？如果加载事件没有上升到文档级别，这几乎可以解释为什么您不能执行 $(document).on("load", ".something", ...)。相反，这是一个非常相关的答案。

【解决方案2】：

我不确定你在这里要做什么——当jQuery(document).ready() 执行时，它已经加载了，因此document 的加载事件已经被调用了。此时附加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 或在任何地方使用 $，因为两者通常可以互换。

【讨论】：

@Jashwant：没错。如果ready 在load 事件之前执行，则在ready 触发后将load 事件附加到文档将是多余的。
@Imdad - jQuery 1.8 文档：“.load(handler(eventObject)) ... 是 .on('load', handler) 的快捷方式。”可用时间：2012 年 8 月，6 月开始测试，我认为在 1.7 下可用，所以你可以投票

【解决方案3】：

在加载时运行函数

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

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

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

或推荐的 onread 简写

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

onready 在文档加载时触发

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

【讨论】：

【解决方案4】：

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

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

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

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

我觉得这很好用。不过，我坚持自定义事件更明确并避免副作用。

【讨论】：