jQuery Combining on() and addClass()

Question

I have a keydown event binding that is attached to elements which have the class numbersOnly which looks like this:

$('.numbersOnly').keydown(function(e) {
    // Determine which key was pressed and ignore if not a number.
});

This works on all elements which were added on page load. However, if I add the class to an element dynamically using .addClass(), the event does not fire on that element. I've tried changing .keydown( to .on('keydown', but it makes no difference (I know it shouldn't - they should be the same).

I'm using jQuery 1.9.1 but I've also tested this in 2.x and it doesn't work there either. Here's a fiddle with a working example:

http://jsfiddle.net/2L5cg/

http://stackoverflow.com/questions/20317092/jquery-after-adding-class-to-a-new-element-cant-trigger-event-by-clicking-on — Karl-André Gagnon, Jun 10 '14 at 16:01
Just a note: the difference between jQuery 1.X and 2.X isn't features, it's browser compatibliity — Ian, Jun 10 '14 at 16:01
Thanks, Karl-André. I was searching mostly for the function names (on/addClass) so I hadn't found this answer. Thanks for the clarification, Ian. Thanks to Felix Kling as well. — Joshua Whitley, Jun 10 '14 at 16:04

score 2 · Answer 1 · answered Jun 10 '14 at 15:58

2

You need to use delegated event as class is added dynamically:

$(document).on('click','.boxClick', function() {
    $('#displayText').show();
});

UPDATED FIDDLE

answered Jun 10 '14 at 15:58

Ehsan Sajjad

61,834
16
105
160

jQuery Combining on() and addClass()

1 Answers1