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

问题描述

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

 < div class =parent> 
 <！ - 内容动态加载 - > 
< div class =child> 
< / div> 
< div class =child> 
< / div> 
<！ -  ...  - > 
< / div> 
  

现在，为了连接一个mouseover事件，我会这样做：

  $（。parent）。on（mouseenter，.child，function（）{
 //在这里做有趣的东西
 
 $ b $（。parent）。on（mouseleave，.child，function（）{
 //撤消有趣的东西
} 
  

这对标准函数来说已经足够了，但是我想把它附加到第三方插件（在我的情况下， HoverIntent ，但真的是任何插件） -

附加HoverIntent插件的语法如下：

  $（。child ）.hoverIntent（makeTall，makeShort）
  

...但我希望这可以用于我的动态内容在文档最初加载时不可用，以及类似于 $（。parent）。on（hoverIntent，.child，function（）{}）; code>似乎不是正确的方法做到这一点。

将插件应用于初始 $（document）.ready（）

解决方案

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



浏览器仅仅为输入元素触发onchange事件（因为它们可以被用户改变）。
$ b

如果任何其他元素发生更改，它必须是因为javascript，因此您可以在创建新内容后调用函数。

  $（。child，parentElementContext）.hoverIntent（makeTall，makeShort）
  

有两个实际的解决方案：

1）我通常做的是创建一个init方法，它接受一个上下文（如文档） 。



  MyPage.init = function（context）{
 $（'。selector'，context）.hoverIntent ）; 
 $（'。other'，context）.dialog（）; //任何其他插件
}; 
  

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



  $。ajax（{
 url：url，
 data：data，
成功：函数（数据）{
 var context = $（'。parent'）; 
 context.html（data）; 
 MyPage.init（context）; //调用hoverIntent和其他插件
} 
}）; 
  



<2>如果您确实需要监控所有内容，您可以使用这个插件
http://james.padolsey.com/javascript/monitoring-dom-properties/

$ b

和 $（'。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屋！