Integrating jQuery tipsy with jQuery ON

Question

I have a site, with infinite pages, and dynamically loaded content.

Currently I am using jQuery tipsy plugin, and need to call it in any function that dynamically adds content to the site (to get tooltips to this new content). I am currently in the process of changing my binds to ons, which will help achieve this where click and other events are concerned.

My current code, that is repeated a lot is:

   $("[data-tooltip]").tipsy({settings here});

Is it possible to use the jQuery ON, and bind this to the body, and if content is added to the body the content (if it has [data-tooltip] attribute) will automatically execute the tipsy function on?

Eg:

 $("body").on("something","[data-tooltip]", function (e) { 
         $("[data-tooltip]").tipsy({settings here}); 
 });

Thanks

score 0 · Answer 1 · answered Apr 07 '14 at 14:21

You'd be much better off to actually just apply tipsy after each new content load, as you might know:

$.ajax({
   ..
   success: function( newHtml ) {
       $('#container').append( newHtml );
       $('#container .tipsy').tipsy({
           /** Your settings **/
       });
   }
});

To achieve what you're asking for; you'd have to apply some kind of 'Listener'. To await for any new DOM Elements that are inserted, In it's raw basic form:

function listenForNewToolTips() {
    $('.someclass[data-tooltip]:not([data-hastipsy])').tipsy({ 
           /** Apply data-hastipsy='true' **/ 
    });
    //Look again in 1000 milliseconds.
    setTimeout( listenForNewToolTips, 1000 );
}

Which the above, is pretty insufficient as it would be a constant loop. on listens to many events, although surprisingly there isn't many events that listen to every DOM element change:

Mutation Observers (New, Non-Cross browser)
DOMNodeInserted (Deprecated)
setTimeout()

Integrating jQuery tipsy with jQuery ON

1 Answers1