Search code examples
javascriptjquerypreventdefault

Toggle event.preventDefault based on classname

I want to toggle the preventDefault method based on the classname of the link element.

Example:

<a href="#" class="myLink disabled">My link</a>

//TO-DO: enable click only when link doesn't have disabled class
$('.myLink').on('click', function() {
    //DO SOME STUFF
});
Solution

  • You can bind the event on the element which don't have a particular class. Using :not() selector, elements can be excluded.

    $('.myLink:not(.disabled)').on('click', function

    If the disabled class is applied dynamically, you have to check if the clicked link have that class using hasClass().

    $('.myLink').on('click', function(event) {
    if ($(this).hasClass('disabled')) {
        event.preventDefault();

        // return false; // Use when no action should be performed
    } else {
        // Handle event
        ...
    }
});