how to prevent calling a function multiple times in Jquery

Question

I have the following code:

$('#main-button').click(function(){

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

Whenever I click the #main-button, say 3 times, and then click the #button, 3 popup boxes appears. How can I prevent this, so no matter how many times the #main-button is clicked, only 1 popup box will appear when the #button is clicked?

Answer 1

Use jQuery one ,or explain what you are trying to do, there can be a better solution.

$('#main-button').click(function(){

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

For example, if your issue is like #button appears only when you click #main-button then use delegation at appropriate level using jquery on() .(I am using delegation from document as your example is not clear)

$('#main-button').click(function(){

});


$(document).on('click','#button',function(){
   alert('something');
});

Answer 2

Or you can use this code:

$('#main-button').click(function(){

    $('#button').unbind("click").click(function(){
        alert('something');
    });
});

Update #1

The unbind was deprecated as of jQuery 1.7. Use off method instead.

Answer 3

if you want to show the pop up only for the #button click, why are you putting the #button click function inside of the #main-button click function?

you can use them separately;

$('#main-button').click(function(){

});


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

Answer 4

Either write :

$('#button').click(function(){
    alert('something');
    return false;
});

Or,

$('#button').click(function(e){
    e.preventDefualt();
    alert('something');
});

I hope it helps.

Answer 5

A simple solution is to set a variable outside of the button and then change the value the first time it's clicked

var clicked = 0;
$('#button').click(function(){
  if(clicked === 0) {
    alert('something');
    clicked = 1;
  }
});

Answer 6

The solution is right there. Your event handler for the #main-button assigns a click handler to the other button every time you click it. Thus, you get X alerts.

Two possible quick fixes, both not elegant but just to show you where it goes wrong:

var isAssigned = false;
$('#main-button').click(function(){
    if (!isAssigned) {
        $('#button').click(function(){
            alert('something');
        });
    }
    isAssigned = true;
});

or

function myHandler() {
    $('#button').click(function(){
        alert('something');
    });
}

$('#main-button').click(function(){
    $('#button').off('click', myHandler);
    $('#button').on('click', myHandler);
});

Answer 7

War10ck: That's true, have updated code & fiddle.

The best solution would be just to unbind click event when link was clicked.

$(function() {
    $('#link').on('click', function() {
        if (!$(this).data('processing')) {
            $(this).data('processing', true);
            alert('A was clicked!!');
            $(this).data('processing', false);
        }
    });
});

http://jsfiddle.net/6jsgs/