sureshuser
New Member
i'm having a little problem with jquery and counting on your help.I have a custom sortable tabs, but, when I click on selected item, I have to click twice, to change the order. here's a demo of script: http://jsfiddle.net/7e3UV/1/try to click on .active class button, on first link for example, you'll see that it requires click to second time for change it's arrow ... so, can anyone help me, understand why this is doing like that? HTML:\[code\]<div id="sort"> <a href="http://stackoverflow.com/questions/11527489/#" data-sort="views" data-order="desc" class="active">views <span>↓</span></a> <a href="http://stackoverflow.com/questions/11527489/#" data-sort="rating" data-order="desc">rating <span>↓</span></a> <a href="http://stackoverflow.com/questions/11527489/#" data-sort="date" data-order="desc">date <span>↓</span></a> </div><!-- #sort -->\[/code\]JS:\[code\]var body = $('body');body.on('click', 'div#sort > a', function(e){ var self = $(this); // if clicked on active tab if( self.hasClass('active') ) { console.log('active'); if( self.data('order') === 'asc' ) { console.log('active asc'); self.data('order', 'desc'); self.children('span').html('↑'); } else { console.log('active desc'); self.data('order', 'asc'); self.children('span').html('↓'); } } // add and remove .active class self.addClass('active').siblings().removeClass('active'); e.preventDefault();});\[/code\]