Как убедиться, что события кнопок запускаются только один раз в 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 / 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

Я бы связал событие click в JavaScript и использовал бы метод jQuery .one().

документация

По сути, один метод позволяет связать событиекоторый может быть запущен только один раз, например, событие щелчка.

Демонстрация в реальном времени

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