Question

如何防止openContent（）;每次点击$("#load-content").on("transitionend ???

时踢.show-content

我不确定如何阻止此transitionend被踢！请heeeelp

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

Answer 1

通常你应该命名事件，并在被触发后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')
});

更新

适应您的代码

（你也使用过多的过渡和hendlers）

我使用e subnamespace创建了一个名称空间所以现在你可以说
.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');
    }
}

Answer 2

你可能需要

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

允许您仅绑定事件一次。被解雇后，这个事件监听器将解除绑定。在此处查看文档：{{3}}

每当我重复点击时，jquery transitionend函数kiks

2 个答案: