CODEWITHSUNDEEP
javascriptjqueryclassevent-handling
user2449973
user2449973

Reputation: 123

Unbinding click handlers on certain classes

I have a table cell that I want to be able to be clicked. But once it is clicked it will have the class ".clicked". When any table cell has this class, I do not want to be clickable. Is there any way to do this?

Upvotes: 2

Views: 58

Answers (4)

Ray Waldin
Ray Waldin

Reputation: 3227

Just add :not(.clicked) to whatever selector you're using to exclude clicked cells.

Upvotes: 0

YD1m
YD1m

Reputation: 5895

Also you can use .off() method to unbind any events.

$('td').on('click', function(){
    $(this).addClass('clicked').off('click');
})

Upvotes: 2

lonesomeday
lonesomeday

Reputation: 237905

This is easily done by inserting some code at the top of the event handler.

$('td').click(function(e) {
    if ($(this).hasClass('clicked')) {
        e.stopPropagation();
        e.preventDefault();
        return;
    }

    // the rest of your code here
});

The other, more involved, way, is to use event delegation and only fire the function if the element doesn't have the class when it's clicked:

$('table').on('click', 'td:not(.clicked)', function() {
    // your code here
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can use the .one() event registration method to do it, it will un-register the handler once the event is fired.

$('td').one('click', function(){
    console.log('hanlded', this)
})

Another solution could be

$('table').on('click', ':not(.clicked)', function(){
    console.log('hanlded', this)
})

Upvotes: 0

Related Questions