只使用jQuery添加一次OnClick处理程序 - 即使再次调用

Question

如果我将处理程序分配给元素的OnClick事件两次,则处理程序将执行两次.但我想改变这一点,即使我分配两次,处理程序也只会执行一次.

证明问题的荒谬示例:

$('.button').click(
    function(){
       alert('here');
});
$('.button').click(
    function(){
       alert('here');
});

所以我已经添加了两次处理程序.现在,当我单击该类的元素时,我会得到两个警告框.

问题是,我如何限制它,所以我只会得到一个警报框？

Answer 1

如果.one()事实上是你所追求的(在触发一次后删除事件处理程序),那么我相信这是正确的答案.如果没有,您可以在绑定之前取消绑定事件:

var myEventHandler = function () {alert('hello')};
$('a').unbind('click', myEventHandler);
$('a').bind('click', myEventHandler);

应该管用.

编辑:由于此回复不断获得投票,我将添加另一个(在大多数情况下更好)解决方案,至少在OP的情况下.处理动态添加的内容时,只需on()在父元素上使用jQuery ,而不是直接在元素上应用事件处理程序.

http://api.jquery.com/on/

Answer 2

您还可以使用 function off('click') 删除函数中任何现有的点击事件：

$('.button').off('click').click(function() {
    ...
});

Answer 3

使用一个。 http://api.jquery.com/one/

$( ".button" ).one( 'click', function(){
    alert( '....' )
});

Answer 4

要仅触发一次事件,请仅绑定一次.动态添加元素时,使用以下命令将事件处理程序绑定到父元素on():

看到这个jsfiddle:

<div id="container">
 <p>Paragraph #1</p>
</div>

<div>
 <button id="add">Add Elements</button>
</div>

<script type="text/javascript">
 var n = 1;
 $('#add').click(function() {
   $('#container').append('<p>Paragraph #' + ++n + '</p>');
 });
 $('#container').on('click', 'P', function() {
   alert($(this).text());
 });
</script>

请注意事件处理程序如何on()仅注册一次.动态添加元素的代码不会注册事件处理程序.

Answer 5

一个可以帮助的小技巧:

jQuery(".button:not(.clickadded)").click(function(){

     alert('here');

).addClass("clickadded");