tipsy live does not work with jQuery 1.9.0

Question

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. :)

Questionary

search here with jquery plugin conflict – Novella

Great post! Where do you get this.selector from? – Glick

@RichPeck this.selector is a property of the underlying jQuery object. – Ulund

Strange reactions until I replaced $(document) with $('body') and now, works like a charm. :) – Pronounced

thanks! exactly what i was searching for :) – Romelda

Answer 1

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

Connecticut

I prefer to not use the jQuery migration plugin for this project. We intend not to use any deprecated features. – Questionary

then will you be able to change the tipsy plugin, if you cannot then I think you have a problem – Connecticut

That's a good solution and I see many issues on github about this specific problem. I wonder why the author doesn't accept any pull requests? – Stivers

This answer is better than the updated question's solution because it uses $(this.context) rather than $(document) to delegate the events. – Ulund

Answer 2

The problem is that this plugin still use .live() to let work the method live you used there, it is deprecated and has been replaced with .on().

You should try to search for updated version of the plugin or try to replace it by yourself.

Mangrum