.on Click for a dynamically created item

Question

I am appending a <li> and when I try to click it using the new .on event, it doesn't work. I don't want to use the .live event since it might be going to be deprecated in the future.

Here is my example: http://jsfiddle.net/2Lbbe/

This works for the first item, if you create a new the alert doesn't work.

Anyone know how can I solve this problem without using live?

I second Matt. I don't see that feature going out of use any time soon. `.on()` *was* introduced in jQuery 0.7, but it doesn't replace anything. If you want to look, here are the *only* deprecated functions: http://api.jquery.com/category/deprecated/ — Blender, Nov 09 '11 at 23:03
Details about the deprecation are right there in the [jQuery doco for `.live()`](http://api.jquery.com/live/) - it's deprecated as of version 1.7. Meanwhile `.delegate()` is "superseded" and `.bind()` is no longer "preferred". As of version 1.7 they recommend using `.on()` instead of all three. — nnnnnn, Nov 09 '11 at 23:04
.live() and .die(): We continue to get many bug reports and see user confusion regarding the quirks of the .live() method. Common issues are now documented on its updated API page. We strongly advise the use of .on() or .delegate() for new code, since they are better APIs. Given its widespread use it’s unlikely we will remove this API in 1.8, but please do update your code as soon as possible. — jQuerybeast, Nov 09 '11 at 23:11
P.S. See also http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/ — nnnnnn, Nov 09 '11 at 23:11
http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/ — jQuerybeast, Nov 09 '11 at 23:11
It's pretty recent, as you can see from the date on that blog post. I found out about it purely by accident earlier this week when I saw another SO question with sample code that used `.on()` - I'd never heard of `.on()` so I looked it up... — nnnnnn, Nov 09 '11 at 23:17

Sinetheta · Answer 1 · 2011-11-09T23:06:26.877

You are essentially trying to do what used to be called .delegate(). Attach the event handler to something permanent, then look inside for your targets.

$("#bxs").on('click', 'li',function() {

your updated fiddle

From the docs:

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

Description: Attach an event handler function for one or more events to the selected elements.

.on() is now capable of serving the purpose of .bind() .live() and .delegate() depending on how it is used. If you want a handler to apply to future items you have to make the final selection using the optional [,selector]

score 2 · Accepted Answer · answered Nov 09 '11 at 23:01

You're quite close, all you need to do is change your selector setup:

From

$("#bxs li").on('click',function() {

To

$("#bxs").on('click', 'li',function() {

Here's an update to your jsfiddle: http://jsfiddle.net/jasper/2Lbbe/2/

Using the .on() function like this is the same as the old .delegate() function:

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+

.on Click for a dynamically created item

2 Answers2