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?

Answer 1

Use the "selector" parameter for event delegation.

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

Source: hoverIntent Documentation

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