Using jQuery .on vs. using .live?

Question

Simple question, since version 1.7 of jQuery .live() has been deprecated in favor of .on(); however .on() does not seem to work on elements that are rendered via JavaScript and loaded into the DOM. So my question is, should .live() still be used or how would .on() capture these newly generated elements?

As an example, here's my code:

$("#listitem").append("<li id='removeitem'>" + 
       formdata + ' <a href="#">Remove</a></li>');

And when I try to operate on this element via .on() - the result is nothing, whereas .live() is able to grab this element.

$("#removeitem").live("click", function(event) { alert($(this).text()); });

All you need to know is here: Differences Between jQuery .bind() vs .live() vs .delegate() vs .on() — Matija Grcic
– Matija Grcic, Commented Jun 2, 2012 at 20:00
@thecodeparadox maybe that's my problem - I just replaced .live with .on — firedrawndagger
– firedrawndagger, Commented Jun 2, 2012 at 20:03

gdoron · Accepted Answer · 2012-06-02 20:05:31Z

7

live version:

$("#removeitem").live("click", function(event) { alert($(this).text()); });

should be changed to:

$("#containerId").on("click", "#removeitem", function(event) { 
    alert($(this).text()); 
});

Where containerId is the static element that the removeitem is loaded into.

You can simply use body as the static element:

$("body").on('click', '#removeitem'm fn);

But the code will be less efficient, just try with it to show how it works.

Notes:

I hope you don't have multiple elements with the same id because it's invalid markup.
It looks like listitem is the static element in your code.

Update:

Maybe that's my problem - I just replaced .live with .on

You can't simply replace them... They work in other ways, and have different parameters!

Read the docs for each function:

on:

.on(events [, selector] [, data], handler(eventObject))

live:

.live( events, handler(eventObject) )

edited Jun 2, 2012 at 20:05

answered Jun 2, 2012 at 20:00

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

firedrawndagger Over a year ago

Right the id is just something I put here, in reality I have a dynamically generated class that I assign, e.g. "item1", "item2", etc.

firedrawndagger Over a year ago

Now what if these are dynamic elements though, in other words I wouldn't know in advance if there were 2 or 5 of them, so how would I write the #removeitem, if it's really more like .removeitem1 and .removeitem2?

Prasenjit Kumar Nag Over a year ago

You can use start with selectors like [class^=removeitem] which will select all element with classname starting with removeitem

gdoron Over a year ago

@firedrawndagger. Give all the new elements a class, let's say item and use this $('body').on('click', '.item', handler);

firedrawndagger Over a year ago

But if I just want one of them, e.g. out of a list, only remove the one with class .removeitem3 and leave the others be?

|

gdoron · Accepted Answer · 2012-06-02 20:22:49Z

1

You should try with.on()like this:

$('#listitem').on('click', '#removeitem', function() {
    alert($(this).text());
});

DEMO

If you don't have fixed id like removeitem and if its structure like removeitem1, removeitem1 etc then try:

$('#listitem').on('click', '[id^=removeitem]', function() {
    alert($(this).text());
});

edited Jun 2, 2012 at 20:22

gdoron

151k59 gold badges302 silver badges376 bronze badges

answered Jun 2, 2012 at 20:00

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

1 Comment

gdoron Over a year ago

I'm not sure you can inform the OP if he didn't comment to your answer.

Collectives™ on Stack Overflow

Using jQuery .on vs. using .live?

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related