CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
MeltingDog
MeltingDog

Reputation: 15404

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;
    });

Upvotes: 4

Views: 8177

Answers (2)

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

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');
});

Upvotes: 8

Rui Costa
Rui Costa

Reputation: 800

To prevent the trigger into an event use event.preventDefault or use event.stopPropagation() to not trigger event into parents.

It is something like what you need?

ejem.

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

Upvotes: 3

Related Questions