Question

Suppose I have this code :

$('.mask-preview:not(.selected)').click(function () {
    $('.mask-preview.selected').removeClass('selected');
    $(this).addClass('selected');
    console.log("added");
});

now, on element with class="mask-preview selected" this handler is not invoked. When I call it on a element without selected, the handler is invoked, and the class is added.

But now, I can still call that handler on that element, also if selected is added. In fact “handler” is not “updated” to the DOM. Is there a way to do this dynamically?

I’ll get rid to check every time if(element.hasClass())

Answer 1

The binding is only happening once, and is not altered when you change the element.

It’s simplest to just check the class inside the callback.

$('.mask-preview').on('click', function() {
    if ($(this).hasClass('selected')) {
        ...
    } else {
        ...
    }
});

EDIT this answer updated, thanks to comments pointing out that the selector in .on only applies to descendants, and not the registered element itself.