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?

are you trying to wait untill; images or jquery functions loaded? — Barlas Apaydin, Jul 05 '12 at 10:30
Use a hoverintent plugin that is implemented as an event so it supports delegation.. `"hoverintent"` should be an event not a method :X — Esailija, Jul 05 '12 at 10:40
@barlas Actually no, the new content is loaded using InfiniteScroll. — Anriëtte Myburgh, Jul 06 '12 at 06:56
@Esailija 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. — Anriëtte Myburgh, Jul 06 '12 at 06:57
@AnriëtteCombrink I mean you can implement it as an event - events support delegation so it would be really simple. Like [this](http://jsfiddle.net/9RfMx/1/). — Esailija, Jul 06 '12 at 08:31

hodgef · Answer 1 · 2017-06-14T15:14:53.750

9

Use the "selector" parameter for event delegation.

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

Source: hoverIntent Documentation

edited Jun 14 '17 at 15:14

answered Jan 20 '14 at 23:19

hodgef

1,416
2
19
31

score 2 · Accepted Answer · answered Jul 05 '12 at 10:30

2

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
    });
});

answered Jul 05 '12 at 10:30

Matt

74,352
26
153
180

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. – Anriëtte Myburgh Jul 06 '12 at 06:54
**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. – hodgef Mar 17 '15 at 16:01

score 0 · Answer 3 · answered Jul 05 '12 at 10:30

0

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.

answered Jul 05 '12 at 10:30

Rich O'Kelly

41,274
9
83
114

Mutation observer support is looking good now http://caniuse.com/mutationobserver/embed – Dylan Valade Sep 10 '17 at 17:18

score 0 · Answer 4 · answered Jul 05 '12 at 10:47

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.
});

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

4 Answers4