버튼 이벤트가 Javascript/JQuery에서 한 번만 트리거되는지 확인하는 방법은 무엇입니까?

Question

저는 JQuery와 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와/자바 스크립트 :

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

나는 자바 스크립트의 클릭 이벤트를 바인딩과 jQuery를 .one() 방법을 사용합니다.

documentation

는 기본적으로 하나의 방법은 그러한 클릭 이벤트로, 한 번 트리거 할 수있는 이벤트를 바인딩 할 수 있습니다.

Live Demo

var percentage = 0;              

$('ul li a').one('click', updateBar); 

function updateBar() 
{ 
    percentage += 25;                
    $('#test').text(percentage); 
} 

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