MeltingDog MeltingDog - 5 months ago 36
Javascript Question

How to prevent Bootsrap Collapse on click?

I have a div that triggers Bootstrap's Collapse on click.

Within that div I also have a button that triggers a Bootstrap Modal.

Problem is, when click the Modal trigger, both the modal is triggered and the collapse. I only want the Modal to trigger.

Is there someway to prevent Bootstrap Collapse on click?

Eg:

$("[data-toggle='collapse'] [data-toggle='modal']").click(function() {
$(this).parent().SomehowStopCollapse;
});

Answer

Your can use event.stopPropagation() it prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$("[data-toggle='collapse'] [data-toggle='modal']").click(function(event) {
    event.stopPropagation();
    var thisModal = $(this).attr('data-target');
    $(thisModal).modal('show');
});