jQuery click method is called many times

Question

Hi guys,

I'm implementing a click button for my animation plugin, but I found a problem. If I clicked the button too many times the elements get out of control.. I'll just show the code:

options.prev.click(function() {
      $(this)
       .siblings()
       .filter('img')
       .slice(0, 1)
       .effect('drop', {direction: 'left'}, 1000)
       .unbind('click');
     })

Basically if the user clicked the button, a drop effect is given to the first element. But if the user clicked too many times. All of the elements will be sliced then all of the elements will have the drop effect which I didn't anticipate.

I want this effect to run smoothly, only the first element will have drop effect no matter how many times the user clicked the button.

Answer 1

If you're only planning on having this happen once, you should first move your unbind up the chain, so that the click stops responding to further events immediately.

Answer 2

jQuery has an event hook called one that allows you to execute an event only once for each matched element.

Seems perfect for this case.