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

Question

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

Answer 1

使用“选择器”参数进行事件委托。

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

资料来源：hoverIntent 文档

Answer 2

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

另一种选择是使用liveQuery插件，并做这样的事情；

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

Answer 3

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

将以突变观察者的形式提供更多原生支持，但目前浏览器支持几乎为零。

监听DOMSubtreeModifed事件是不可靠的并且会导致主要的性能问题。

Answer 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.
});