[英]How to make sure buttons events are only triggered once in Javascript/JQuery?
我是 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'); }
});
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'); }
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.