Javascript 每次我重复单击时，jquery transitionend函数都会停止

如何防止openContent（）；每次单击

时，将
$（“#加载内容”）。打开（“transitionend
。显示内容”

我不知道该如何停止这一

转换并
被踢！请注意

$('.show-content').on('click', function (e) {
  e.preventDefault();
  openContent();
});
$('#load-content').on('click','.prev',function (e){
  e.preventDefault();
  closeContent(this);
});
function openContent(){  
    $('#load-content').load('../views/product-page.html');
    $('.container').addClass('loaded');
    $("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
    $(this).addClass('animate');
    var body = $("body,html");
    body.animate({
      scrollTop: 0
    }, 800);
});
}
function closeContent(ele){
    var Loaded = !$(ele).closest('.container').hasClass('loaded');
    if (!Loaded) {
        $('.animate').removeClass('animate');
        $("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
            $('.loaded').removeClass('loaded');
            $('#show-content').remove();
        });
    }           
}

通常，您应该为事件命名，并在触发后关闭事件

$el.on('transitionend.mynamespace' function(){
    $el.off('transitionend.mynamespace')
});

例如：

$dropdown.on('transitionend.fadein' function() {
    // some function to be called on transitionend
    doSomething();
    // event will not be called again
    $dropdown.off('transitionend.fadein')
});

更新


适应您的代码

（您也使用了太多的transitionend Hendler）

我创建了一个带有e subnamespace的名称空间
现在你可以说

.off（'transitionend.loadcontent'）


.off（'transitionnd.loadcontent.open'）


.off（'transitionnd.loadcontent.close'）

试试哪一个能满足你的需要

您通常应该阅读以下内容：

代码看起来也不太惊人。

您应该考虑一种更为重要的编码风格和缓存选择器以提高可读性和性能。例如，因为您使用了混合引号，所以我替换了所有<代码> < <代码> > <代码> >代码>。
也许在编辑器中运行jsHint并多次缓存所需的所有元素。
但这对这件事的运作来说并不重要

$('.show-content').on('click', function(e) {
    e.preventDefault();
    openContent();
});
$('#load-content').on('click', '.prev', function(e) {
    e.preventDefault();
    closeContent(this);
});

function openContent() {
    $('#load-content').load('../views/product-page.html');
    $('.container').addClass('loaded');
    $('#load-content').on('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open', function() {
        $(this).addClass('animate');
        var body = $('body,html');
        body.animate({
            scrollTop: 0
        }, 800);
        $('#load-content').off('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open');
    });
}

function closeContent(ele) {
    var Loaded = !$(ele).closest('.container').hasClass('loaded');
    if (!Loaded) {
        $('.animate').removeClass('animate');
        $('#load-content').on('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close', function() {
            $('.loaded').removeClass('loaded');
            $('#show-content').remove();
        });
        $('#load-content').off('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close');
    }
}

你可能需要

   $ele.one('click',function(){...})

这允许您只绑定一次事件。被激发后，此事件侦听器将自动解除绑定。请检查此处的文档：
类似的内容！不完美抱歉，如果您能提供帮助，那将非常好，因为我不确定我是否可以单独组合该函数。非常感谢您的所有建议。但是，$（“#加载内容”）。on（'transitionend.loadcontent.close WebKittTransitionEnd.loadcontent.close'，function（）{$（'loaded'）.removeClass（'loaded'）；$（'show content'）.remove（）}）；不起作用！你能再检查一下原因吗？找到了，应该是$（'load content'）。一（'transitionend.loadcontent WebKittTransitionEnd.loadcontent'，函数（）{$（'loaded'）。removeClass（'loaded'）；$（'show content'）。remove（）；}）；太棒了！谢谢你