Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

tipsy live does not work with jQuery 1.9.0

Tags:

We recently upgraded our jQuery to 1.9.0, but it broke our tipsy plugin. Its live functionality now causes an error.

$('.tooltip, abbr').tipsy({
    live: true
});

TypeError: this[binder] is not a function

Are there any fixes or patches for this? Googling didn't lead to anything useful.


UPDATE:

Thanks for the answers. I decided to try to fix the issue myself, because I couldn't find any patches.

Upon inspection the error seemed really easy to trace. The tipsy plugin can easily be patched to use the on functionality instead of the deprecated live functionality. In the tipsy plugin, I replaced the following code:

if (options.trigger != 'manual') {
    var binder = options.live ? 'live' : 'bind',
        eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
        eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
    this[binder](eventIn, enter)[binder](eventOut, leave);
}

with:

if (options.trigger != 'manual') {
    var eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
        eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
    if (options.live)
        $(document).on(eventIn, this.selector, enter).on(eventOut, this.selector, leave);
    else
        this.bind(eventIn, enter).bind(eventOut, leave);
}

Works like a charm. :)

like image 808
Dysprosium Avatar asked Mar 18 '13 09:03

Dysprosium


1 Answers

you need to include jquery migration plugin, since you are using live:true it make use of jquery.live which was removed in jquery 1.9.

For backward compatibility they have created a migration plugin which can be downloaded here and include the migration plugin to add back support for the removed methods and utilities.

I would be doing something like

if (options.trigger != 'manual') {
    var eventIn  = options.trigger == 'hover' ? 'mouseenter' : 'focus',
        eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
    if(options.live){
      $(this.context).on(eventIn, this.selector, enter).on(eventOut, this.selector, leave);
    } else {
      this.on(eventIn, enter).on(eventOut, leave);
    }
}
like image 95
Arun P Johny Avatar answered Sep 20 '22 16:09

Arun P Johny