如何確保按鈕事件僅在 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

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