jquery how to prevent transitionend event being called twice

Some issue with the closeContent() fucntion, I can't work out how to prevent it to run each time I click .show-content.

transitionend shouldn't kick twice basically.

Any help would be much appreciated.

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

Answers


You shouldn't nest events... Anyway, as a simple fix, use one():

$("#load-content").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {...});

I am not sure what you want but by the looks of it you are stopping any default action by e.preventDefault(); and as it is not solving your problem I am guessing that you want to prevent the event from bubbling up the dom tree that will prevent any parents of being informed about the event and for that you can use event.stopPropagation() check the docs here.Hope that answers your question


Need Your Help

Building Boost Libraries With Intel Compiler

c++ boost compiler-construction build icc

I have installed Intel Parallel Studio XE 2013 in addition to Visual Studio 2012 on a 32bit Windows 7 machine. I have tried to build Boost 1.53 with Intel compiler by following the instructions in ...

How to Choose Formattype for Matlab's saveas with Big Matrices?

matlab image-processing matrix

I am trying to increase the input matrix size by 10^3 and found out that Matlab's saveas command does not work anymore with my current setting