292

I recently updated jQuery from 1.8 to 2.1. I suddenly discovered that the .live() stops working.
I get the error TypeError: $(...).live is not a function.

Is there any method I can use in place of .live()?

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
ngplayground
  • 20,365
  • 36
  • 94
  • 173
  • 1
    Does this answer your question? [Turning live() into on() in jQuery](https://stackoverflow.com/questions/8021436/turning-live-into-on-in-jquery) – djg Sep 28 '22 at 05:38
  • Related post - [Uncaught TypeError: $.ajax(...).error is not a function](https://stackoverflow.com/q/47974868/465053). `.error` is another jQuery function which got deprecated in jQuery v3.x – RBT Oct 07 '22 at 09:38

10 Answers10

620

jQuery .live() has been removed in version 1.9 onwards

That means if you are upgrading from version 1.8 and earlier, you will notice things breaking if you do not follow the migration guide below. You must not simply replace .live() with .on()!


Read before you start doing a search and replace:

For quick/hot fixes on a live site, do not just replace the function live with on,
as the parameters are different!

.live(events, function)

should map to:

.on(eventType, selector, function)

The (child) selector is very important! If you do not need to use this for any reason, set it to null.


Migration Example 1:

before:

$('#mainmenu a').live('click', function)

after, you move the child element (a) to the .on() selector:

$('#mainmenu').on('click', 'a', function)

Migration Example 2:

before:

$('.myButton').live('click', function)

after, you move the element .myButton to the .on() selector, and find the nearest parent element (preferably with an ID):

$('#parentElement').on('click', '.myButton', function)

If you do not know what to put as the parent, document always works:

$(document).on('click', '.myButton', function)

See also:

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
  • that's great. In most of cases I used the latest approach, therefore replacing code like `jQuery('.upload_image_button').live('click', function)` with code like `jQuery('body').on('click', '.upload_image_button', function)` and it worked like a charm (After cache cleaning of course!) – loretoparisi Sep 27 '20 at 18:20
  • 1
    +1 I just inherited a very old legacy app with a set of broken click behaviors to fix. The 'migration examples' were spot on and very helpful. – Gary.Ray Jan 14 '21 at 16:54
100

You can avoid refactoring your code by including the following JavaScript code

jQuery.fn.extend({
    live: function (event, callback) {
       if (this.selector) {
            jQuery(document).on(event, this.selector, callback);
        }
        return this;
    }
});
Liran Barniv
  • 1,320
  • 1
  • 10
  • 10
  • 4
    Should include a `return this;` at the end of the function in order to preserve chaining ability – Guerilla Feb 06 '18 at 09:28
  • Does using this will cause any problems in the future? – Alexandre Elshobokshy Nov 06 '18 at 10:56
  • you may want to consider include this inside an if condition targeting a version. eg. if ($.fn.jquery != "x.x.x") { //do this code inside here }. This is required because some old versions may not have 'on' fuction – Ruben Benjamin Aug 21 '20 at 20:27
  • It worked perfectly, using JQuery 2.1.4, and running the project in an iFrame. Thanks. Utilizing your code in the example posted here. https://www.cffcs.com/Code/2051 – Wayne Barron Oct 26 '22 at 18:49
23

Forward port of .live() for jQuery >= 1.9 Avoids refactoring JS dependencies on .live() Uses optimized DOM selector context

/** 
 * Forward port jQuery.live()
 * Wrapper for newer jQuery.on()
 * Uses optimized selector context 
 * Only add if live() not already existing.
*/
if (typeof jQuery.fn.live == 'undefined' || !(jQuery.isFunction(jQuery.fn.live))) {
  jQuery.fn.extend({
      live: function (event, callback) {
         if (this.selector) {
              jQuery(document).on(event, this.selector, callback);
          }
      }
  });
}
David Thomas
  • 4,027
  • 3
  • 28
  • 22
17

The jQuery API documentation lists live() as deprecated as of version 1.7 and removed as of version 1.9: link.

version deprecated: 1.7, removed: 1.9

Furthermore it states:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()

Sirko
  • 72,589
  • 19
  • 149
  • 183
7

.live() was deprecated and has now been removed from jQuery 1.9 You should use .on()

koopajah
  • 23,792
  • 9
  • 78
  • 104
7

A very simple fix that doesn't need to change your code, just add jquery migration script, download here https://github.com/jquery/jquery-migrate/

It supplies jquery deprecated but needed functions like "live", "browser" etc

Tofeeq
  • 2,523
  • 1
  • 23
  • 20
6

.live was removed in 1.9, please see the upgrade guide: http://jquery.com/upgrade-guide/1.9/#live-removed

matino
  • 17,199
  • 8
  • 49
  • 58
5

I tend not to use the .on() syntax, if not necessary. For example you can migrate easier like this:

old:

$('.myButton').live('click', function);

new:

$('.myButton').click(function)

Here is a list of valid event handlers: https://api.jquery.com/category/forms/

ESP32
  • 8,089
  • 2
  • 40
  • 61
  • 4
    I think the .on() syntax is required just for dynamically loaded content (for example, elements added after the page is loaded). – T30 Apr 12 '17 at 14:54
5

When i will getting this error on my site .it will stop some functionality on my site, after research i find the solution for this problem ,

$colorpicker_inputs.live('focus', function(e) {
    jQuery(this).next('.farb-popup').show();
    jQuery(this).parents('li').css( {
        position : 'relative',
        zIndex : '9999'
    })
    jQuery('#tabber').css( {
        overflow : 'visible'
    });
});

$colorpicker_inputs.live('blur', function(e) {
    jQuery(this).next('.farb-popup').hide();
    jQuery(this).parents('li').css( {
        zIndex : '0'
    })
});

Should be replace 'live' to 'on' check below

    $colorpicker_inputs.on('focus', function(e) {
    jQuery(this).next('.farb-popup').show();
    jQuery(this).parents('li').css( {
        position : 'relative',
        zIndex : '9999'
    })
    jQuery('#tabber').css( {
        overflow : 'visible'
    });
});

$colorpicker_inputs.on('blur', function(e) {
    jQuery(this).next('.farb-popup').hide();
    jQuery(this).parents('li').css( {
        zIndex : '0'
    })
});

One more basic exmaple below :

.live(event, selector, function) 

Change it to :

.on(event, selector, function)
Aslam Khan
  • 382
  • 2
  • 2
3

If you happen to be using the Ruby on Rails' jQuery gem jquery-rails and for some reason you can't refactor your legacy code, the last version that still supports is 2.1.3 and you can lock it by using the following syntax on your Gemfile:

gem 'jquery-rails', '~> 2.1', '= 2.1.3'

then you can use the following command to update:

bundle update jquery-rails

I hope that help others facing a similar issue.

fagiani
  • 2,293
  • 2
  • 24
  • 31