Question

I will try to explain me, yet it is confused until for me.
I’m developing a weekly calendar where the user do click over a cell, a prompt is showed for a comfirmation action and then the cell is repainted. Let’s make this more detailed:

Html markup:

<td> <a class="free"></a> </td>

JS code looks like this (pseudocode):

$(".free").click(function() {
    alert('engaging');
    $(this).text("taken");
    $(this).removeClass("free").addClass("taken");
})

What’s going wrong here? Well, once the element class is replaced with “taken” instead of “free”, if the user click again over this link the alert is showed again, where it should not!

I think that this example in jsfiddle ilustrate my scenario

Thank you in advance

Answer 1

The click handler will still be attached to the element, even if you change it’s class dynamically, you have to remove the handler with off().

$(".free").on('click', function(){
     alert('engaging');
     $(this).text("reservada").removeClass("free").addClass("taken").off('click');
});

FIDDLE