on click doesn't work for element that has class added by jquery

Question

I have a element that when a check box is checked a class is added and removed from the element.. Now when the checkbox is checked the class is added to correctly, however, the .on('click') handler for that element with the class added to it is ignored. If I manually add the class to the element then the .on('click') element is not ignored..

For instance..

When the checkbox is activated it adds the .delete class to the , however, when the is clicked after the class was added through jquery..the below code is never executed. However, it will work if the class was hard coded in

$('a.delete').on('click',function(e){
    e.preventDefault();
    console.log('delete clicked');

    });

Is it just not possible to put a on click event for a element with a class that is added through addClass()? I feel like this is a simple problem ..

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jason P, Oct 02 '13 at 20:21
possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) — Omar, Oct 02 '13 at 20:23
sorry...really didn't know it was a repost and I did spend a while searching google for an answer. — CI_Guy, Oct 02 '13 at 20:38

score 2 · Answer 1 · answered Oct 02 '13 at 20:21

You'd have to listen to the DOM (The document itself) instead for newly appended Objects:

$(document).on('click', 'a.delete', function( event ) {
  //code - use Event for preventing 
  //any default behaviour 
});

$('.classdiv').click() generally only works for currently placed DOM elements.

score 2 · Accepted Answer · answered Oct 02 '13 at 20:22

Adding and removing the class dynamically would require a delegated event handler, as the element doesn't have the delete class when the event handler is attached :

$(document).on('click', 'a.delete', function(e){
    e.preventDefault();
    console.log('delete clicked');
});

replace document with the parent element.

score 1 · Answer 3 · 2013-10-02T20:22:59.027

1

Try this

$(document).on('click', 'a.delete' ,function(e){
    e.preventDefault();
    console.log('delete clicked');
});

edited Oct 02 '13 at 20:22

answered Oct 02 '13 at 20:22

score 1 · Answer 4 · answered Oct 02 '13 at 20:24

This happens because the jquery selector returns all elements which match at the time the object is created. It then attaches the event handlers to those elements. If later an element changes to match or not match that selector, it does not go back and attach or remove handlers.

To get around this, you will need to use event delegation, with on.

$(STATIC_ANCESTOR).on("click", "a.delete", function(){...

Where STATIC_ANCESTOR is an ancestor element which will not be re-loaded. If no other fitting element exists, this can be document. Though for performance reasons you want this element to be as low in the DOM as possible.

You can read more about event delegation in the on documentation.

score -1 · Answer 5 · answered Oct 02 '13 at 20:38

-1

use live instead of "on"

$('a.delete').live('click',function(e){
    e.preventDefault();
    console.log('delete clicked');

    });

answered Oct 02 '13 at 20:38

sino

754
1
7
22

2

thanks but live() was depreciated in favor of on()..besides that doesn't seem to have answered my question anyway – CI_Guy Oct 02 '13 at 20:40

on click doesn't work for element that has class added by jquery

5 Answers5