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

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

• javascript
• jquery
• twitter-bootstrap

2 Answers 2

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

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