如何確保按鈕事件只在Javascript/JQuery中觸發一次？

我是JQuery和Javascript的新手，我使用的是JQueryUI ProgressBar，每當有人點擊一個按鈕時，進度條就會動畫並填充。有沒有辦法跟蹤哪些按鈕已被按下以防止按鈕再次觸發事件？如何確保按鈕事件只在Javascript/JQuery中觸發一次？

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

來源

2011-08-17 lislis

我會結合JavaScript的click事件，並使用jQuery的.one()方法。

documentation

基本上一個方法允許你綁定只能觸發一次，如點擊事件的事件。

Live Demo

來源

2011-08-17 21:18:41 Loktar

這工作就像一個魅力，簡單到如此地步。我將不得不在JQuery文檔中進行更多的挖掘。非常感謝！：D – lislis

頁面刷新/重新加載後，用戶可以再次調用該功能。有什麼辦法來限制這一點。我在問，因爲這個函數在iframe頁面被調用，並且當用戶點擊一個鏈接時刷新頁面，否定一次調用。有任何想法嗎？ – lislis

如果頁面重新加載，JS將被重新加載：？您可以嘗試使用參數page.html？perc = 25重新加載頁面，因此在重新加載它時知道百分比已經達到25％。或傳遞通過頁面參數點擊的元素。然後，您將不得不在網頁加載時解析url參數並禁用鏈接。但這完全是另一個問題。 – Loktar

HTML（添加類）：

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

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

來源

2011-08-17 21:19:17 Neal

這個效果很好，除了它限制了我實際上重新點擊該按鈕的時候，我實際上需要這樣做。但是，我喜歡它的一般化，所以它可以應用於任何元素。 – lislis

如何確保按鈕事件只在Javascript/JQuery中觸發一次？

回答

相關問題