jQuery中事件内的事件

Question

This might be a very basic question but I couldn't find an answer. (I might be looking for the wrong terms...)

Sometimes I feel that I need to add an event inside another event in order to share variables, for example. But I've realized the events inside can be fired multiple times depending on the times the parent event has been fired.

Here's a basic example of what I'm talking about: http://jsfiddle.net/mRc9K/

$('.demo').click(function(){
    $('.hidden').show(function(){
        $('#link').click(function(){
            alert("Clicked"); //fired multiple times
            $(this).parent().hide(); 
        });
    });
});

If you click more than once in the "First Click" you will see how the second event is fired multiple times.

I am not looking for that behavior. I know I can avoid it using delegation making use of .on() but... isn't there any other way to avoid the events inside to be fired multiple times?

Thanks.

Answer 1

A solution would be to use jQuery's one() method.

one() - Attach a handler to an event for the elements. The handler is executed at most once per element.

In this case, it would be:

$('#link').one('click', function(){
   alert("Clicked"); //fired multiple times
   $(this).parent().hide(); 
});

jsFiddle example here.

Answer 2

Just use .one() , which binds the event just once per element:

$('.demo').click(function () {
    $('.hidden').show(function () {
        $('#link').one('click', function () {
            alert("Clicked");
            $(this).parent().hide();
        });
    });
});

Demo and Documentation

Answer 3

You can also use a variable as a flag: Live DEMO

var clicked = false;
$('.demo').click(function(){
    clicked = true;
    $('.hidden').show(function(){
        $('#link').click(function(){
            if(clicked == true){
                alert("Clicked");
                $(this).parent().hide();
                clicked = false;
            }
        });
    });
});

Answer 4

You can either fire it once like all others said or you can unbind the click event every time (Just a different aproach)

$('.demo').click(function(){
    $('.hidden').show(function(){
        $('#link').click(function(){
            alert("Clicked");
            $(this).parent().hide();
            $('#link').unbind('click');
        });
    });
});

jsfiddle :).