JQuery / Live is deprecated, okay ... But not replaced

Question

On does not work as a replacement for live ; since the new ON does NOT work for future items. No problem in my implementations; I'm used to living live, and I definitely know when something works or not with jquery.

haml part:

.field %label Select a file = file_field_tag 'post[image]', :class => :dashed %span.adder + add another file 

coffe part:

 $("span.adder").on "click", (e) -> new_field = $(this).closest(".field").clone() $(new_field).insertAfter( $(this).closest(".field") ) 

Why doesn't the newly added span.adder have jquery behavior associated with their class? Something like this shoudl works in this case.

Why did jQuery guys delete it? I do not understand.

---

UPDATE

---

 $("span.adder").on("click", function(){ }); 

Will not work like a living.

It should be

 $(document).on("click", "span.adder", function(){ }); 

(thanks for answers).

Answer 1

To work with future elements, you must use them on this document.

 $(document).on('click', 'span.adder', function(){ //Code here }); 

Answer 2

Before .on() ever appeared, .live() already considered an inefficient way to handle event bindings. Because of this, for future use you should use .on()

eg: -

 $(document).on('click', '#yourElement', function() { // your functions here }); 

There is a more accurate explanation here.

Answer 3

This is a replacement. Direct translation:

 $(document).on('click', '.my-selector', function() {}); 

Answer 4

They are deprecated and removed it because they had a better implementation. You see the .on() documentation

 $(ancestor).on(event, element, function); 

You should use this as the ancestor that is next to this element. There are some performance issues.

Also upgrade your jQuery version.

Answer 5

On works as a delegate is used, not as .live; You must use it for the parent, and then specify the event and the children that fire it; sort of.

 $(window).on("click", ".button", function(){ alert("You clicked the button... and I hate alerts"); });