Question

i’m listening to a click event. When triggered, I need to bind a different event (for other element) but it keeps triggering both on the first event.

My code:

$(".element1").on("click", function(){  
    console.log("triggered element1");  
    $(".element2").on("click", function(){  
        console.log("triggered element2");  
    })  
});

Answer 1

A separate copy of the event handler for .element2 will get bound every time .element1 is clicked. If you want to prevent that, remember in a variable whether you have already bound the handler.

var e2bound = false;
$(".element1").on("click", function(){  
    console.log("triggered element1");  
    if(!e2bound){
        $(".element2").on("click", function(){  
            console.log("triggered element2");  
        })
        e2bound=true;
    }
});

An alternative solution would be to unbind the first handler when it runs:

$(".element1").on("click", function e1handler(){  
    console.log("triggered element1");  
    $(this).off("click", e1handler);
    $(".element2").on("click", function(){  
        console.log("triggered element2");  
    })  
});