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

时间:2023-01-27
本文介绍了通过 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*