通过 jQuery,on() 将 jQuery 插件调用附加到动态加载-前端问题

Attaching jQuery plugin calls to dynamically loaded elements via jQuery,on()(通过 jQuery,on() 将 jQuery 插件调用附加到动态加载的元素)

本文介绍了通过 jQuery,on() 将 jQuery 插件调用附加到动态加载的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

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

现在，为了连接鼠标悬停事件，我会这样做:

$(".parent").on("mouseenter", ".child", function(){//在这里做有趣的事情}$(".parent").on("mouseleave", ".child", function(){//在这里撤消有趣的东西}

这对于标准功能来说已经足够好了，但我想将它附加到第三方插件(在我的例子中，HoverIntent，但实际上是任何插件) -

附加 HoverIntent 插件的语法如下:

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

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

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

解决方案

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

浏览器仅为输入元素触发 onchange 事件(因为它们可以由用户更改).

如果其他元素发生变化，那一定是javascript的原因，所以你可以在创建新内容后调用函数.

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

有2个实用的解决方案

1) 我通常做的是创建一个带有上下文(例如文档)的 init 方法.

MyPage.init = function(context) {$('.selector', context).hoverIntent();$('.other', context).dialog();//任何其他插件};

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

$.ajax({网址:网址，数据:数据，成功:函数(数据){var context = $('.parent');上下文.html(数据)；MyPage.init(上下文);//调用hoverIntent和其他插件}});

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

然后 $('.parent').on('valuechange', function() {/* init plugins*