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

问题描述

我有一部分代码通过 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*/}

I have a portion of code that is dynamically loaded via an AJAX call by appending the result to a parent element, similar to this:

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

Now, in order to hook up a mouseover event, I would do something like this:

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

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

This works well enough for standard functions, but I want to attach this to a third-party plugin (in my case, HoverIntent, but really any plugin) -

The syntax for attaching the HoverIntent plugin is as so:

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

... but I want this to work for my dynamic content that was not available at the time the document initially loaded, and something like $(".parent").on("hoverIntent", ".child", function(){}); doesn't seem to be the right way to do this.

What is the correct approach to applying a plugin to elements loaded after the initial $(document).ready()?

解决方案

jquery .on works by monitoring events on a parent object and then calling the handler if the event originated from a matched child selector. In your case, however, the event you want to monitor is that the element changed

Browsers fire the onchange event for input elements only (because they can be changed by a user).

If any other element changes, it must be because of javascript, hence you can call functions after created new content.

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

There are 2 practical solutions

1) What i typically do is create an init method that takes a context (such as the document).

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

Then I manually call init when I update the DOM (because i dont always need to call init when I update the dom)

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

2) If you really need to monitor everything, you can use this plugin http://james.padolsey.com/javascript/monitoring-dom-properties/

and then $('.parent').on('valuechange', function() { /* init plugins*/}

这篇关于通过 jQuery,on() 将 jQuery 插件调用附加到动态加载的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！