bootstrap tab click preventDefault not working

Question

I am using bootstrap 3.3 and following the documents for tabs.

The simplest code given in the documentation is not working for me and I am unable to figure out why.

$('#mainTabs a').click(function (e) {
            e.preventDefault()
            console.log('Clicked');
        });

When I use

show.bs.tab

event, preventDefault works. But for somereason click doesn't. The console is printing 'clicked', but does not prevent the tab change.

Basically I am trying to intercept the tab change, show a modal and based on user input, show or not show the new tab.

Please help.

Most probably the event doesn't propagate to the element you're matching, so there's no default there to prevent — Adelin, Jul 16 '18 at 13:33

Hardik Shah · Accepted Answer · 2018-07-17T05:29:16.090

5

If e.preventDefault(); is not working you must use e.stopImmediatePropagation(); instead.

For further information take a look at: What's the difference between event.stopPropagation and event.preventDefault?

$("#mainTabs a").click(function(e) {
     e.stopImmediatePropagation();
});

If you've attached other event handlers to the link, you should look into e.stopPropagation() and e.stopImmediatePropagation() instead. Note that return false is equivalent to calling both event.preventDefault() and event.stopPropagation().

EDIT ==========

Use return false;.

edited Jul 17 '18 at 05:29

answered Jul 16 '18 at 13:33

Hardik Shah

4,042
2
20
41

1

yes this worked. Also I tried with return false and it too also worked. Thanks so much. – Stacy J Jul 16 '18 at 13:37
@StacyJ, Can you mark this answer, if you find this appropriate? – Hardik Shah Jul 17 '18 at 05:28

score 0 · Answer 2 · answered Jan 28 '21 at 17:35

Had the same problem, for reasons unknown the prevent default does nothing to the bootstrap 4 form. Here's official code from bs team which has been slightly adjusted.

$(document).ready(function() {
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('notificationForm');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (!checkValidity()) {
                        console.log('did not validate');
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
})

Then you need a checkValidity function which will return true or false depending on your validation.

In case you're validating checkboxes:

Chances are you're validating a group of checkmarks because that's not supported by bs so here's my validation code just in case (this will confirm that at least 1 checkboxes in the regionSelect div have been selected.

function checkValidity() {
    var regionsValidation = $('div.regionSelect :checkbox:checked').length;
    var categoriesValidation = $('div.categorySelect :checkbox:checked').length;
    if( (regionsValidation > 0) && (categoriesValidation > 0)) {
        return true;
    }
    else {
        return false;
    }
}

bootstrap tab click preventDefault not working

2 Answers2

EDIT ==========