javascript - JQuery .click event won't turn back on -

i created panel (div) slides in , out of nav bar. right now, it'll open , close once fine won't respond clicks anymore.

$('.work-link').mouseover(function(){     if($('.work-link').css('left') === '0px')     {         $('.work-link').off('click');     }     else if($('.work-link').css('left') === '-750px')     {         $('.work-link').on('click');     }; });  $('.work-link').on('click', function(){     $('.work-link').animate({left: '0px'}, 600);     $('.work-link').css('cursor', 'default');     $('.sort-container').animate({marginleft: '0px'}, 800);     $('.exit-sort').fadein(600);     $('.port-type').animate({marginright: '140px'}, 600);     $('.port-type').text("click x close").fadein(); });  $('.exit-sort').on('click',function(){     $('.work-link').animate({left: '-750px'}, 600);     $('.work-link').css('cursor', 'pointer');     $('.sort-container').animate({marginleft: '-750px'}, 700);     $('.exit-sort').fadeout(600);     $('.port-type').animate({marginright: '70px'}, 600);     $('.port-type').text("sort portfolio type").fadein(); }); 

i figured problem has how used .on() , .off() events don't know how else approach it. doing wrong?

you can try : instead of having mouseover handler use if conditions in click handler shown below don't have on / off click handlers again , again.

note:- should use $(this) instead of $('.work-link') load on script. $(this) object of clicked element.

$('.work-link').on('click', function(){     if($(this).css('left') === '0px')     {         return true;     }     else if($(this).css('left') === '-750px')     {        $('.work-link').animate({left: '0px'}, 600);        $('.work-link').css('cursor', 'default');        $('.sort-container').animate({marginleft: '0px'}, 800);        $('.exit-sort').fadein(600);        $('.port-type').animate({marginright: '140px'}, 600);        $('.port-type').text("click x close").fadein();     } });