0

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()); });
gdoron
  • 147,333
  • 58
  • 291
  • 367
firedrawndagger
  • 3,573
  • 10
  • 34
  • 51

2 Answers2

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:

  1. I hope you don't have multiple elements with the same id because it's invalid markup.
  2. 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) )
gdoron
  • 147,333
  • 58
  • 291
  • 367
  • 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 Jun 02 '12 at 20:05
  • 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? – firedrawndagger Jun 02 '12 at 20:09
  • You can use start with selectors like `[class^=removeitem]` which will select all element with classname starting with `removeitem` – Prasenjit Kumar Nag Jun 02 '12 at 20:11
  • 1
    @firedrawndagger. Give all the new elements a class, let's say `item` and use this `$('body').on('click', '.item', handler);` – gdoron Jun 02 '12 at 20:19
  • 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? – firedrawndagger Jun 02 '12 at 20:19
  • @firedrawndagger. then use this as the selector... (one of)the thing(s) about moving from `live` to `on` is the selector of `live` is the second parameter of `on`. – gdoron Jun 02 '12 at 20:20
  • Yes I did, thanks for the help. I had some issues figuring out the selectors but once i generalized it to the element -
  • and then used $(this) to manipulate it, that made it work
    • – firedrawndagger Jun 02 '12 at 21:03