jQuery addEventListener not working as intended

Question

I have the following code:

$('.uiModalWrapper').live('click', function() {

                            var modal = $(this).find('.uiModal');

                            modal.addClass('shake');

                            modal.addEventListener('webkitAnimationEnd', function() {

                                modal.removeClass('shake');

                            });


                        });

Which should add a class called shake to an element when it's clicked and then remove it again when the webkitAnimationEnd event takes place. However it causes an error Uncaught TypeError: Object [object Object] has no method 'addEventListener'

Any ideas on how to fix this? Thanks

You should read more about jQuery: http://api.jquery.com/category/events/ — Felix Kling, Mar 12 '12 at 01:34

score 1 · Answer 1 · answered Mar 12 '12 at 01:30

1

modal is a jQuery object, not a DOM element. It doesn't have addEventLister, it has the jQuery stuff for adding listeners (on?).

answered Mar 12 '12 at 01:30

Dagg Nabbit

75,346
19
113
141

score 0 · Answer 2 · answered Mar 12 '12 at 01:35

0

you could get the modal element just with var modal = $('.uiModal'); and then you can work with the DOM element

answered Mar 12 '12 at 01:35

msonsona

1,306
14
20

2

That would get _all_ ".uiModal" elements, not just the ones inside the clicked ".uiModalWrapper" element, and it would still be a jQuery object - need to say `modal[0]` to work with the (first) DOM element. – nnnnnn Mar 12 '12 at 01:37

score 0 · Answer 3 · edited May 23 '17 at 11:48

0

This solves the problem: Is there a callback on completion of a CSS3 animation?

Seems using BIND will do the trick.

edited May 23 '17 at 11:48

Community

1
1

answered Mar 12 '12 at 01:40

Cameron

27,963
100
281
483

jQuery addEventListener not working as intended

3 Answers3