Question

I have 2 html elements: A and B, here is the jquery code:

$('A').click(function(){
    $('B').click(function(){
        console.log("hello");
    })
})

when I click A and then click B, it will show me “hello”, which is fine.
But when I click A again and then click B, this time it shows me TWO “hello”, which is undesirable. I only want ONE hello.

I more or less know the reason, it might be the result of the callback function: B is still waiting for user to click it after the first click.

now my question is: if I still want “clicking B” inside “clicking A” (“clicking B” is a callback function of “clicking A”), how can I solve the double result problem?

I am new to the callback function, please help!!!

Answer 1

The problem is, that each consecutive click on A adds another click-handler to your B. Each of these handlers get executed when you click on B. So if you click A ten times, you have bound ten clickhandlers to B 😀

To avoid the problems of the other solutions, constant un- and rebinding and global variables which both are nasty, use this clean solution instead:

$('A').one("click", function(){
    $('B').click(function(){
        console.log("hello");
    })
})

By using .one() instead of click, the click-event on A is triggered only once, binding exactly one click-eventhandler to your element B.

Example Fiddle