是否可以在 jQuery 中嵌套事件侦听器

Question

一旦“转换”结束，我将使用“transitionend”来运行进一步的代码。

我一直没有成功尝试嵌套事件侦听器，因此我可以在初始转换完成后观看进一步的转换。

从下面的代码中可以看出，我一直在进行测试，尝试先停止冒泡并删除以前的事件侦听器，但没有任何成功。

在下面，第一个偶数侦听器工作，然后第二个之后的任何东西都不会运行。

任何关于我做错了什么的指导，将不胜感激。

$('.image-viewer').addClass('animate animate-out').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

    e.stopPropagation();

    if ( e.originalEvent.propertyName === 'opacity' ) {

        $('.image-viewer').removeClass('animate animate-out').off("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");

        $('.image-viewer').addClass('transition').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

            e.stopPropagation();

            if ( e.originalEvent.propertyName === 'opacity' ) {

                $('.image-viewer').off("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");

            }
        });

    }

});

Answer 1

由于您嵌套了相同的事件，因此您可以设置一个全局侦听器：

$(document).on( "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", '.image-viewer, function(){
            if ( e.originalEvent.propertyName === 'opacity' ) {

                $('.image-viewer').off();

            }
} );