I have an element and two different functions are assigned to it. One calls for carousel.next() and another triggers a navigation link to change class. I need click to be disabled until both are complete. How can I achieve that?
(I am talking about $('.carousel-next') element Here is the code: function mycarousel_initCallback(carousel) { $('.navigation a').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval($(this).text())); $('.navigation .selected').removeClass('selected'); $(this).addClass('selected'); return false; }); $('.carousel-next').bind('click', function() { carousel.next(); return false; }); } $(document).ready(function () { // first carousel (coda) $('.carousel-first').jcarousel({ visible: 1, scroll: 1, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null, wrap: 'both' }); // second carousel (image) $('.carousel-second').jcarousel({ visible: 1, scroll: 1, vertical:true, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null, wrap: 'both', animation:'slow' }); // hacking navigation to follow 'next' $('.navigation a:first').addClass('selected'); $('.carousel-next').click(function(){ if ($('.navigation li:has(.selected) + li').length!=0) { $('.navigation li:has(.selected) + li') .children() .addClass('selected'); $('.navigation .selected:first').removeClass('selected'); } else { $('.navigation li:first') .children() .addClass('selected'); $('.navigation .selected:last').removeClass('selected'); } }); });