Javascript/JQueryでボタンイベントが1回だけトリガーされるようにするにはどうすればいいですか？

Question

JQueryUIとJavascriptが初めてで、JQueryUI ProgressBarを使用しています。誰かがボタンをクリックするたびに、プログレスバーがアニメーション化されていっぱいになります。どのボタンが既に押されているかを追跡して、ボタンがイベントを再度トリガーするのを防ぐ方法はありますか？

現在のHTML：

<ul> 
    <li><a href="left/section1.html" target="leftcontainer" onClick="updateBar();window.presentation.location.href='right/section1/page1.html';;return true;">overview</a></li> 
    <li><a href="left/section2.html" target="leftcontainer" onClick="updateBar();window.presentation.location.href='right/section1/page1.html';;return true;">key features</a></li> 
    <li><a href="#" onClick="updateBar()">customers</a></li> 
    <li><a href="#" onClick="updateBar()">accessories</a></li> 
    <!--<li><a href="#">nav5</a></li> 
    <li><a href="#">nav6</a></li> --> 
    </ul> 

現在のjQueryの/ JavaScriptは：

var percentage = 0;              

function updateBar() 
{ 
    percentage += 25;                
    $('.ui-progressbar-value').stop().animate({ width: percentage+"%" }, 500)  
    $('.middle').progressbar('option','value', percentage);       

    if(percentage > 100)                
    { 
     $('ui-progressbar-value').stop().animate({ width: "100%"}, 500);    
    } 
} 

$(function() { 
    $('.middle').progressbar({           
     value: percentage,            
     complete: function() { alert('The progress bar is full'); }  
    }); 

Answer 1

私はJavaScriptでクリックイベントをバインドとjQuery .one()メソッドを使用します。

documentation

基本的にひとつの方法は、あなたは、このようなクリックイベントとして、一度だけトリガーされるイベントをバインドすることができます。

Live Demo

​​

Answer 2

HTML（クラスを追加）：

<li><a href="#" class='clickable'>customers</a></li> 
<li><a href="#" class='clickable'>accessories</a></li> 

JS

var percentage = 0;              

$(function() { 
    $('.clickable').click(function updateBar(){ 
     $(this).unbind('click'); //dont allow click again 
     percentage += 25;                
     $('.ui-progressbar-value').stop().animate({ width: percentage+"%" }, 500);  
     $('.middle').progressbar('option','value', percentage);       

     if(percentage > 100)                
     { 
      $('ui-progressbar-value').stop().animate({ width: "100%"}, 500);    
     } 
    }); 

    $('.middle').progressbar({           
     value: percentage,            
     complete: function() { alert('The progress bar is full'); }  
    }); 
});