Attaching jQuery plugin calls to dynamically loaded elements via jQuery,on()

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:

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 class="child">
     <!-- ... -->

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)

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

2) If you really need to monitor everything, you can use this plugin

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

Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..