本文介绍了通过 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*
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！