sanguisuga sanguisuga - 6 months ago 20
Javascript Question

jquery transitionend function kiks in every time I repeat my click

How To prevent openContent(); to kick the

$("#load-content").on("transitionend
each time I click
.show-content
???

I'm not sure how to stop this
transitionend
to be kicked! Please 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

generally you should namespace the event and the off the event after being fired

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

Example:

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

UPDATE


adapted to your code

(you are also using way too many transitionend hendlers)

I created a namespace with e subnamespace so now you can say
.off('transitionend.loadcontent ')
.off('transitionend.loadcontent.open ')
.off('transitionend.loadcontent.close ')

Try which one will do what you need

You should generallly read this: http://api.jquery.com/event.namespace/

Also the code doesn't look too amazing.
You should consider a more consequent codingstyle and cache selectors to improve readability and performance. E.g. I replaced all " with ' since you were using mixed quotes. Maybe run jsHint in your editor and cache all elements that are needed more than once. But that's not really important for this thing to work.

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