CODEWITHSUNDEEP
javascriptjqueryaddeventlistener
alt
alt

Reputation: 13907

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

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.

Upvotes: 2

Views: 6741

Answers (4)

xdazz
xdazz

Reputation: 160843

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() {
   //....
});

Upvotes: 2

Andreas Wong
Andreas Wong

Reputation: 60526

$('#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

Upvotes: 6

mikevoermans
mikevoermans

Reputation: 4007

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'); 
});

Upvotes: 1

Evan Anger
Evan Anger

Reputation: 714

Are you missing the event parameter?

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

Upvotes: 1

Related Questions