What is the Replacement for jQuery.live

Question

What should be the proper replacement for the jQuery.live(). I know jQuery.on() does the same thing but in case of jQuery.on() we have to specify the parent in order to make it work.

Suppose i have 500 live on my page and now i want to change all the 500 live to on and doing it by selecting the parent of each element would not be feasible and would take more time.

Suppose i have $(".item").live("click",function(){ alert("test"); });

and if i replace it by jQuery.on() then it should be $("body").on("click",".item",function(){ alert("test"); });

but i wonder if there is some shortcut way or anything else to achieve this like this

$(".item").on("click",function(){ alert("test"); });

so that i can replace all in few seconds.

Answer 1

.live() is dead, long live .live(): https://github.com/jquery/jquery/commit/eed78cc321ed7e2b37fb34e32fbb528b24f61d6e

Though seriously, for the one-liner you seek, you can just add it back:

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

Add that towards the top of your JS to effectively create a shim that will allow you to use .live() as you want and not care about which version of jQuery you're using.

But really, like others are saying, you should just do a find-replaceall using the text editor of your choice, or a command line utility like sed. In the shim solution I give you, you're calling a function to call another function, which introduces a lot of overhead and may use an unnecessary amount of resources. .on() is much more efficient, especially if you call it directly.

---

Update: The above solution relies on jQuery's internal .context property, which has been deprecated since jQuery 1.10 and may disappear in any subsequent version. An alternative version that should fulfill your needs most of the time would be to simply replace this.context with document. This has limitations outlined in the .context property's API:

The value of this property is typically equal to document, as this is the default context for jQuery objects if none is supplied. The context may differ if, for example, the object was created by searching within an <iframe> or XML document.

So it may fail. Anyway, by now you definitely have no excuse to not be using .on() directly. Feel free to check out my tips on upgrading to the most recent version of jQuery.

Answer 2

You could define a small plugin giving you the old live function by calling on but this would only let you with a worse code. You need to refactor your code to use on properly.

A solution to help you manage the initial change a little more easily would be to use a regex to do the replacement. Most text editors can let you do that.

For the use case you give, you could use this (example in JavaScript, adapt for your editor) :

var output = input.replace(
      /\$\(\"([^\"]+)\"\)\.live\(\"([^\"]+)\"/g,
      '$(document.body).on("$2", "$1"'
);

Input :

$(".item").live("click",function(){ alert("test"); });
$(".item2").live("change",function(){ console.log("test"); });

Output :

$(document.body).on("click", ".item",function(){ alert("test"); });
$(document.body).on("change", ".item2",function(){ window.top.console.log("test"); }); 

After this initial transformation you would have to look for better parent elements than document.body.

Answer 3

Similar to @destroy's answer - something else to try - after backing up your file

I don't have Komodo but managed to develop the following for Notepad++ :

Find

\$\("(.+)"\).live\("(.+)",

Replace with

$(document).on('\2', '\1',

Regex syntaxes vary so you may have to work at it.

You may also need to adapt or run several variants of the regex, for example to cater for single versus double quotes, or whitespace.