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

Question

一旦一个“transition”结束，我将使用“transition ended”来运行更多的代码。

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

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

在下面的代码中，第一个even监听器可以工作，第二个监听器之后的任何东西都不会运行。

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

$('.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();

            }
} );