Javascript event listener fails because "undefined" is not a function

Question

I've been working with this for a few hours and it's driving me mad. I've got a modal window that pops up on click of a link. It's got a CSS transition so it fades in. I need to have a callback for when that transition completes. So I dug up this event listener:

$('#tagBox').addEventListener(
    'webkitTransitionEnd', 
    function(event) { 
        alert( "Finished transition!" ); }, 
    false );

I'm in Safari, but that code returns this error:

TypeError: 'undefined' is not a function (evaluating '$('#tagBox').addEventListener( 'webkitTransitionEnd', function(){ alert( "Finished transition!" ) }, false )')

Is my syntax correct? I can do alert($('#tagBox')) and it returns [object] so it's finding the modal element. Why does it say undefined is not a function?

Thanks.

Why don't you use bind instead?

inhan
– inhan

2012-03-19 01:54:10 +00:00
Commented Mar 19, 2012 at 1:54 — inhan
– inhan, Commented Mar 19, 2012 at 1:54
That'll repeat over and over, right?

alt
– alt

2012-03-19 02:01:35 +00:00
Commented Mar 19, 2012 at 2:01 — alt
– alt, Commented Mar 19, 2012 at 2:01
Only when the eventType has been triggered…

inhan
– inhan

2012-03-19 11:41:47 +00:00
Commented Mar 19, 2012 at 11:41 — inhan
– inhan, Commented Mar 19, 2012 at 11:41

Andreas Wong · Accepted Answer · 2012-03-19 02:12:19Z

6

$('#tagBox') returns a jQuery element which doesn't have addEventListener method which is a native method. You need to get the raw DOM before calling addEventListener by doing:

$('#tagBox')[0].addEventListener(// your code

answered Mar 19, 2012 at 2:12

Andreas Wong

60.7k19 gold badges112 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xdazz · Accepted Answer · 2012-03-19 02:15:06Z

2

Something should like to be:

$('#tagBox').bind('webkitTransitionEnd', function() {
   //....
});

And if you want to fire just once, you could use .one:

$('#tagBox').one('webkitTransitionEnd', function() {
   //....
});

edited Mar 19, 2012 at 2:15

answered Mar 19, 2012 at 1:53

xdazz

161k38 gold badges255 silver badges278 bronze badges

5 Comments

alt Over a year ago

This repeats over and over, how can I have it just happen on complete

xdazz Over a year ago

The event is fired when transition ends, what do you mean by "repeats over and over"?

alt Over a year ago

Sorry, I have a bunch of transitions going on within #tagbox. Fixed by doing $(this).unbind() inside that bind event.

xdazz Over a year ago

@JacksonGariety You could use .one for that.

alt Over a year ago

How can I combine them so It works in opera and firefox as well? How do I add in the oTransitionEnd?

Evan Anger · Accepted Answer · 2012-03-19 01:53:18Z

1

Are you missing the event parameter?

box.addEventListener( 
'webkitTransitionEnd', 
function( event ) { 
     alert( "Finished transition!" ); 
}, false );

answered Mar 19, 2012 at 1:53

Evan Anger

7141 gold badge5 silver badges27 bronze badges

Comments

mikevoermans · Accepted Answer · 2012-03-19 02:07:47Z

1

If you're using the most recent version of jquery 1.7+ you'll actually be looking for "on" http://api.jquery.com/on/ which will allow you to add your events to it.

$('#tagBox').on('webkitTransitionEnd', function(event) { alert('whatever'); });

Combined with jQuery off:

$('#tagBox').on('webkitTransitionEnd', function(event) { 
    $('#tagBox').off('webkitTransitionEnd');
    alert('whatever'); 
});

edited Mar 19, 2012 at 2:07

answered Mar 19, 2012 at 1:54

mikevoermans

4,00725 silver badges27 bronze badges

1 Comment

alt Over a year ago

That is looping over and over and over. I want tit to just happen once.

Collectives™ on Stack Overflow

Javascript event listener fails because "undefined" is not a function

4 Answers 4

Comments

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related