如何只注册一次点击事件？

Question

I am trying to register click event once to my element in my project.

I have simplfy my codes and basically my structure looks like the following:

function objectParent(){

}

objectParent.prototype.click=function()(

   $('#create').click(function(){
     var var1=new objectchild();
         var1.add();
   })

}

function objectchild(){

}

objectchild.prototype.add=function()(

  //The '#aButton' click event will be registered 4 times if the '#create' button is clicked 4 times.
  //so the alert will pop 4 times when 'aButton' is clicked which is not what I wanted.

  //I can use $('#aButton').unbind('click') to remove the click event but I have many buttons in my project
  //and I want to have better solution for this.

  $('#aButton').click(function(){
     alert('click')
   })

}

var test=new objectParent()
    test.click();

html

<a id='create' href='#'>test</a>

//everytime this <a> is clicked, it will create a new objectchild object 
//after click 4 times of this button and click 'aButton', it will pop the alert box 4 times
//I know it register click event 4 times to the 'aButton' 
//I only want to pop the alert box once.

//I can use $('#aButton').unbind('click); to remove the click event but I have many many buttons in my codes
//ex bButton, cButton...etc. I want to have a better approach for my codes.

<a id='aButton' href='#'>button</a>

I hope I explain my problem well. Thanks for the help!

Answer 1

Just do:

$('#aButton').one('click', function(){
     alert('click')
});

Answer 2

Try:

var clickHandler = function(event) {
  $('#element').unbind('click', clickHandler);
  ...
} 
$('#element').on('click', clickHandler);

http://jsfiddle.net/zYGhz/

Answer 3

I think Nelson & alex must be misunderstood what FlyingCat was asking...
the one() method can only make sure the registered handler be called only once,
but if the developer invoke one() method several times(just like in FlyingCat's scenario),

 for (var i = 0; i < 3; i++) {
     $("#element").one(function() {
          alert(1);
     })
 }

each registered handler will be called once when clicked, so problem still not resolved.
Kolink's answer is correct, and minor changes you have to make.

Answer 4

The easiest approach by far is to ensure that any previous attachments of objectchild's click function are removed before attaching a new one. There are other approaches but the code would be more voluminous.

objectchild.prototype.add = function(){
    $('#aButton').off('click.x').on('click.x'function(){
        alert('click');
    });
};

.x is used to namespace the event. This allows .off('click.x') to operate without affecting other click handlers that may have been attached elsewhere in your code. If no other click handlers are attached then namespacing is not strictly necessary, but it does no harm.

You will probably want to replace .x with something more meaningful.