Turning live() into on() in jQuery

Question

My application has dynamically added Dropdowns. The user can add as many as they need to.

I was traditionally using jQuery\'s live() method to detect w

Answer 1

The on documentation states (in bold ;)):

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

Equivalent to .live() would be something like

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

Although it is better if you bind the event handler as close as possible to the elements, that is, to an element being closer in the hierarchy.

Update: While answering another question, I found out that this is also mentioned in the .live documentation:

Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

Answer 2

Just found a better solution which doesn't involve editing third party code:

https://github.com/jquery/jquery-migrate/#readme

Install the jQuery Migrate NuGet package in Visual Studio to make all the versioning issues go away. Next time Microsoft update their unobtrusive AJAX and validation modules perhaps try it without the migrate script again to see if they resolved the issue.

As jQuery Migrate is maintained by the jQuery Foundation I think this is not only the best approach for third party libraries and also to get warning messages for your own libraries detailing how to update them.

Answer 3

In addition to the selected answers,

If you use Visual Studio, you can use the Regex Replace.
In Edit > Find and Replace > Replace in Files
Or Ctrl + Shift + H

In Find and Replace pop-up, set these fields

Find what: \$\((.*)\)\.live\((.*),
Replace with: $(document.body).on($2,$1,
In find options check "Use Regular Expressions"

Answer 4

jquery verision x.x.x.js open editor, find jQuery.fn.extend

add code

live: function( types, data, fn ) {
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },

Example : jquery-2.1.1.js --> line 7469 (jQuery.fn.extend)

Example images view

Answer 5

In addition to the selected answer,

Port jQuery.live to jQuery 1.9+ while you wait for your application to migrate. Add this to your JavaScript file.

// Borrowed from jQuery 1.8.3's source code
jQuery.fn.extend({
  live: function( types, data, fn ) {
          if( window.console && console.warn ) {
           console.warn( "jQuery.live is deprecated. Use jQuery.on instead." );
          }

          jQuery( this.context ).on( types, this.selector, data, fn );
          return this;
        }
});

Note: Above function will not work from jQuery v3 as this.selector is removed.

Or, you can use https://github.com/jquery/jquery-migrate