How to replace "live" from jQuery 1.8.3 to jQuery 1.9? [duplicate]

Question

My web framework automatically updated my jQuery script to the current last version, the 1.9.

Now all my:

$(".myclass").live("click", function() {...

don't work anymore. I mostly used it with some ajax called which filled html in my page.

I would know how to replace this functionnality in the last version. A friend told me to use "on" instead, but the "on" stays fixed on the same element.

Explanation, in this example (no ajax), I use a "+" icon, to display an "ul li list".

$(".closed").live('click', function(){
    $("#ul_list_"+$(this).attr('id')).addClass("displayed").removeClass("hidden").show();
    $(this).addClass("openned").removeClass('closed');
    $(this).html('<i class="icon-minus"></i>');
});

$(".openned").live('click', function(){
    $("#ul_list_"+$(this).attr('id')).addClass("hidden").removeClass("displayed").hide();
    $(this).addClass("closed").removeClass('openned');
    $(this).html('<i class="icon-plus"></i>');
});

(I know that the script is not the most optimized ever, but it worked. I used classes to open or close my lists. And if the visitor doesn't have JS enabled, nothing is hidden, all the folded lists are opened)

Notes:

• I've tried https://github.com/jquery/jquery-migrate, but the only message that I have is "JQMIGRATE: jQuery.fn.live() is deprecated", not how to fix it.

Southwester

Indeed, I searched from 1.8 to 1.9, or just "jquery 1.9 live" without noticing it was from 1.7! Thank you! – Southwester

Answer 1

The docs already provide an example:

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+

So: $(document).on("click", ".closed", function() { ... }).

Swap

The docs also have a really good description of how the selector arg works: "When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector." – Buiron

Indeed, I was reading the examples of the new "on" documentation... I didn't thought about the "live" documentation... Thank you! – Southwester

.on does not work like .live, I think Jquery think has not really provided a something to replace it. .live was very convenient – Unexpressive

I tried these examples unsuccessfully with 1.9.x. When I looked at some legacy source code in one of my projects I did not use the "closest wrapper" element. Instead I just used $("#element").on("click", fn(){}); and it worked just fine... scratching my head still. – Khanate

Answer 2

You need to use on with a delegated handler:

$('#parent').on('click', '.closed', function() {
   // your code...
});

Note that you should replace #parent with the closest parent element to .closed which is available on page load - usually the element which .closed was appended to.

Passion

Answer 3

you have to use the on instead of live. because live is deprecated on the version 1.7

Nganngc

This isn't right. $(".closed") will only include elements that matched when this code is run, not elements that later get marked as closed. The point of live was that the query was "live". – Buiron