如何确保按钮事件仅在 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 中绑定 click 事件并使用 jQuery .one() 方法。

documentation

基本上 one 方法允许您绑定只能触发一次的事件，例如点击事件。

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