每次我重复点击时，jquery transitionend函数都会提示

通常，您应该为事件命名，并在off触发事件之后对事件进行命名

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

更新

适应您的代码

（您也使用了太多过渡过渡者）

我用e子命名空间创建了一个命名空间，所以现在您可以说
.off('transitionend.loadcontent ')
.off('transitionend.loadcontent.open ')
.off('transitionend.loadcontent.close ')

尝试哪个可以满足您的需求

您通常应该阅读以下内容：http : //api.jquery.com/event.namespace/

而且代码看起来也不是太神奇了。
您应该考虑使用更常用的编码样式和缓存选择器，以提高可读性和性能。例如"，'由于您使用的是混合引号，因此我全部替换为。也许在您的编辑器中运行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');
    }
}