jQuery.on() - how initialize as soon as elements have been loaded

Question

I'm trying to add the hoverIntent plugin to elements on my page, however some elements will be added to the DOM later on, which means I have to bind the plugin to future elements as well. How do you do that? I have seen the same questions on SO a few times, but nobody has a clear solution?

Hypnotist

are you trying to wait untill; images or jquery functions loaded? – Castera

Use a hoverintent plugin that is implemented as an event so it supports delegation.. "hoverintent" should be an event not a method :X – Gainsborough

@barlas Actually no, the new content is loaded using InfiniteScroll. – Countrywoman

@Gainsborough I have no clue what you're telling me, as far as I know, there' only one HoverIntent plugin and only one way you can implement it. – Countrywoman

@AnriëtteCombrink I mean you can implement it as an event - events support delegation so it would be really simple. Like this. – Gainsborough

Answer 1

There's no support in jQuery to do this; it's something the plugin itself must support. The most common approach is to simply re-initialize the plugin after adding new content; which normally isn't a problem.

Another option is to use the liveQuery plugin, and do something like this;

$('yourSelector').livequery(function () {
    $(this).hoverIntent({
        // blah
    });
});

Casework

I wrote a re_init() function containing all the code that needed to be re-initialized once new content was loaded. I only realized there's more code then the hoverIntent that needed to be re-initialized once I started with this function. – Countrywoman

For anyone else who stumbles upon this problem: hoverIntent supports event delegation without the need for extra plugins. See my answer below for an example. – Nudd

Answer 2

Use the "selector" parameter for event delegation.

$('#PARENT').hoverIntent({
    over: function() {
        console.log($(this));
    },
    out: function(){
        console.log($(this));
    },
    selector: '.CHILD'
});

Source: hoverIntent Documentation

Nudd

Answer 3

The best way to achieve this is to raise a custom event when you add the new elements to the page. Subscribers to this event can then call the appropriate hoverIntent initialisers.

There will be more native support in the form of mutation observers, however browser support is currently next to nil.

Listening for the DOMSubtreeModifed event is not reliable and causes major performance issues.

Oaks

Mutation observer support is looking good now caniuse.com/mutationobserver/embed – Lammergeier

Answer 4

try to change your jquery structure;

ABC = {
   init: function() {//all function names goes here
       ABC.myFunction1();
       ABC.myFunction2();
       ABC.myFunction3();
   },
   myFunction1: function() {
     //code
   },
   myFunction2: function() {
     //code
   },
   myFunction3: function() {
     //code
   }//dont put comma last one
}

$(function() {
    ABC.init();//calls all functions after everything is initialized and ready.
});

Castera