jquery how to prevent transitionend event being called twice

Question

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

Answer 1

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

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

Answer 2

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