如何确保按钮事件只在Javascript / JQuery中触发一次？(How to make sure buttons events are only triggered once in Javas

如何确保按钮事件只在Javascript / JQuery中触发一次？(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'); } });

I'm new to JQuery, and Javascript, and I am using the JQueryUI ProgressBar, and every time somebody clicks on a button, then the progress bar animates and fills up. Is there a way to keep track of which buttons are already pressed to prevent the buttons from triggering the event again?

Current 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>

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

最满意答案

我会在JavaScript中绑定click事件并使用jQuery .one()方法。

文件

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

现场演示

var percentage = 0; $('ul li a').one('click', updateBar); function updateBar() { percentage += 25; $('#test').text(percentage); }

I would bind the click event in the JavaScript and use the jQuery .one() method.

documentation

Basically the one method allows you to bind an event that can only be triggered once, such as a click event.

Live Demo

var percentage = 0; $('ul li a').one('click', updateBar); function updateBar() { percentage += 25; $('#test').text(percentage); }