jQuery/Javascript, two solutions for click but only one works

Question

I'm creating an .item element using Javascript, then I want to remove it by clicking. Why does .click() not work?

$('.item').click(function() {
    $(this).remove();
});

Working solution (why does it work? and why don't we always use this instead of .click()?):

$(document).on('click','.item',function() {
    $(this).remove();
});

You should add a jsfiddle with more context. `click()` has always worked for me, so you may be doing something unusual. — Visionary Software Solutions, Jul 17 '13 at 04:03
I'd also suggest using a closer parent than `document`, unless elements with a class of `item` will exist all the way up to `body`; you really want the closest parent element that doesn't get replaced at any point. — Tieson T., Jul 17 '13 at 04:09
@VisionarySoftwareSolutions ..you never met with incident like this ? then you must havent tried anything adventurous..its events binding to dynamically created elements — coolguy, Jul 17 '13 at 04:10

score 3 · Accepted Answer · edited May 23 '17 at 11:56

3

$('.item') returns all of the elements with a class of item at the time you call the jQuery constructor with that selector. You then attach an event handler to each and every one of them. It isn't designed to account for new elements.

The event delegation syntax binds the click handler to document and handles all click events. If the event's target was an element that matches your selector (.item), the event is accepted.

See this question as well: Why not take Javascript event delegation to the extreme?

edited May 23 '17 at 11:56

Community

1
1

answered Jul 17 '13 at 04:04

Blender

289,723
53
439
496

Thanks for your answer. Event delegation seems much more flexible than just `.click()`. Why do we use `.click()` at all? – jane Jul 17 '13 at 04:11
@musicguyguy: Read the link at the bottom of my answer. – Blender Jul 17 '13 at 04:11

Arun P Johny · Answer 2 · 2013-07-17T04:10:22.743

The reason could be the .item elements are added dynamically

When you use $('.item').click(..) it binds the click handler only to those elements which exists in the dom at that moment of time, so if an elements is added after this statement is executed the click handler will not will attached to the new elements.

when you use $(document).on('click','.item',function() {}); to register click event handler, it makes use event propagation to work. In the dom event structure an event from an element will get bubbled up to the document object. id if a element is clicked the click handlers attached to it and its parent elements will get triggered unless the event propagation is prevented. So in this method the click eveht handler is registered to the document object, so when the click event from an element is bubbled upto the document object it tests the events source element(or its parent) with the passed filter in this case .item and it is true then the handler is executed

score 0 · Answer 3 · answered Jul 17 '13 at 04:06

0

Because the elements are created dynamically after the page load...

Another solution

$('body').delegate('.item','click',function() {
    $(this).remove();
});

answered Jul 17 '13 at 04:06

coolguy

7,866
9
45
71

This is essentially the same as the working solution already given by the OP. – Jul 17 '13 at 04:07
*As of jQuery 1.7, `.delegate()` has been superseded by the `.on()` method.*: http://api.jquery.com/delegate/ – Blender Jul 17 '13 at 04:07
yes i know..thats why i mentioned as Another solution @Blender – coolguy Jul 17 '13 at 04:10
@Blender ..thanks for that info i thought `live()` was depreciated..`delegate` was still there – coolguy Jul 17 '13 at 04:14

jQuery/Javascript, two solutions for click but only one works

3 Answers3