jQuery.on() - 加载元素后如何初始化答案

【问题标题】：jQuery.on() - how initialize as soon as elements have been loadedjQuery.on() - 加载元素后如何初始化
【发布时间】：2012-07-05 10:26:14
【问题描述】：

我正在尝试将 hoverIntent 插件添加到我页面上的元素中，但是稍后会向 DOM 添加一些元素，这意味着我还必须将插件绑定到未来的元素.你是怎样做的？我在 SO 上见过几次相同的问题，但没有人有明确的解决方案？

【问题讨论】：

你要等到吗？加载图像或 jquery 函数？
使用一个作为事件实现的 hoverintent 插件，因此它支持委托。"hoverintent" 应该是一个事件而不是一个方法：X
@barlas 其实不是，新内容是使用 InfiniteScroll 加载的。
@Esailija 我不知道你在告诉我什么，据我所知，只有一个 HoverIntent 插件，并且只有一种方法可以实现它。
@AnriëtteCombrink 我的意思是你可以将它作为一个事件来实现——事件支持委托，所以它真的很简单。喜欢this。

标签： jquery hoverintent jquery-on

【解决方案1】：

使用“selector”参数进行事件委托。

$('#PARENT').hoverIntent({
    over: function() {
        console.log($(this));
    },
    out: function(){
        console.log($(this));
    },
    selector: '.CHILD'
});

来源：hoverIntent Documentation

【讨论】：

【解决方案2】：

jQuery 不支持这样做；这是插件本身必须支持的东西。最常见的做法是在添加新内容后简单地重新初始化插件；这通常不是问题。

另一种选择是使用liveQuery plugin，并执行类似的操作；

$('yourSelector').livequery(function () {
    $(this).hoverIntent({
        // blah
    });
});

【讨论】：

我编写了一个re_init() 函数，其中包含加载新内容后需要重新初始化的所有代码。我才意识到，一旦我开始使用此函数，需要重新初始化的 hoverIntent 代码更多。
对于其他偶然发现此问题的人： hoverIntent 支持事件委托，无需额外的插件。请参阅下面的答案以获取示例。

【解决方案3】：

实现这一点的最佳方法是在向页面添加新元素时引发自定义事件。然后，此事件的订阅者可以调用适当的 hoverIntent 初始化程序。

将以mutation observers 的形式提供更多原生支持，但目前浏览器支持几乎为零。

侦听DOMSubtreeModifed 事件不可靠，会导致严重的性能问题。

【讨论】：

突变观察器支持现在看起来不错caniuse.com/mutationobserver/embed

【解决方案4】：

尝试改变你的 jquery 结构；

ABC = {
   init: function() {//all function names goes here
       ABC.myFunction1();
       ABC.myFunction2();
       ABC.myFunction3();
   },
   myFunction1: function() {
     //code
   },
   myFunction2: function() {
     //code
   },
   myFunction3: function() {
     //code
   }//dont put comma last one
}

$(function() {
    ABC.init();//calls all functions after everything is initialized and ready.
});

【讨论】：