Javascript事件侦听器失败，因为“undefined”不是函数

Question

我一直在用这个工作几个小时，这让我很生气。 我有一个模态窗口，点击一个链接弹出。 它有一个CSS转换，因此它会淡入。我需要在转换完成时进行回调。 所以我挖出了这个事件监听器：

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

我在Safari中，但该代码返回此错误：

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

我的语法是否正确？ 我可以做alert($('#tagBox'))并返回[object]所以它找到了模态元素。 为什么说undefined不是函数？

谢谢。

Answer 1

$（'＃tagBox'）返回一个jQuery元素，该元素没有addEventListener方法，这是一种本机方法。 您需要通过执行以下操作来调用addEventListener之前获取原始DOM：

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

Answer 2

应该是：

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

如果你想只开一次，你可以使用.one ：

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

Answer 3

你错过了事件参数吗？

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

Answer 4

如果您使用的是最新版本的jquery 1.7+，那么您实际上正在寻找“on” http://api.jquery.com/on/ ，它将允许您将事件添加到其中。

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

---

结合jQuery off ：

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