通过 jQuery,on() 将 jQuery 插件调用附加到动态加载的元素

Question

我有一部分代码是通过 AJAX 调用动态加载的，方法是将结果附加到父元素，类似于：

<div class="parent">
     <!-- Inner content loaded dynamically -->
     <div class="child">
     </div>
     <div class="child">
     </div>
     <!-- ... -->
</div>

现在，为了连接鼠标悬停事件，我会执行如下操作：

$(".parent").on("mouseenter", ".child", function(){
 //Do fun stuff here
}

$(".parent").on("mouseleave", ".child", function(){
 //Undo fun stuff here
}

这对于标准函数，但我想将其附加到第三方插件（在我的例子中，HoverIntent，但实际上任何插件） -

附加 HoverIntent 插件的语法如下：

$(".child").hoverIntent( makeTall, makeShort )

...但我希望它适用于文档最初加载时不可用的动态内容，以及类似 $(".parent") 的内容.on("hoverIntent", ".child", function(){}); 似乎不是执行此操作的正确方法。

将插件应用于初始 $(document).ready() 之后加载的元素的正确方法是什么？

Answer 1

jquery .on 的工作原理是监视父对象上的事件，然后在事件源自匹配的子选择器时调用处理程序。然而，在您的情况下，您想要监视的事件是元素更改

浏览器仅针对输入元素触发 onchange 事件（因为它们可以由用户更改）。

如果任何其他元素发生变化，那一定是因为 javascript，因此您可以在创建新内容后调用函数。

$(".child", parentElementContext).hoverIntent( makeTall, makeShort )

有 2 个实用的解决方案

1) 我通常做的是创建一个采用上下文（例如文档）的 init 方法。

MyPage.init = function(context) {
    $('.selector', context).hoverIntent();
    $('.other', context).dialog(); // any other plugins
};

然后我在更新 DOM 时手动调用 init （因为我更新 dom 时并不总是需要调用 init）

$.ajax({
  url: url,
  data: data,
  success: function(data){ 
     var context = $('.parent'); 
     context.html(data);
     MyPage.init(context); //calls hoverIntent and other plugins
  }
});

2）如果你真的需要监控一切，你可以使用这个插件
http://james.padolsey.com/javascript/monitoring-dom-properties/

然后 $('.parent').on('valuechange', function() { /* 初始化插件*/}

Answer 2

我过去曾使用 jQuery Livequery 插件 来执行此操作

Answer 3

您可以使用 live 将事件附加到现在或将来位于 DOM 中的元素。

$(".parent .child").live("mouseover", function(){
    //Do fun stuff here
}).live("mouseout", function(){
    //Undo fun stuff here
});

所以你的插件可能看起来像这样

$.fn.hoverIntent = function(mouseover, mouseout) {
    this.live("mouseover", mouseover).live("mouseout", mouseout);
    return this;
};

，你可以调用这个插件

$(".parent .child").hoverIntent(makeTall, makeShort).load("other_page.php");