If we have click events bound to elements inside a bootstrap modal, clicking on the element closes the modal. Here is a trick to prevent that.

Bootstrap Modals have the following default structure:

<div class="modal">
  <div class="modal-content">
    ...
      <div class="modal-body">
        <a href="/some-url" data-remote="true">Some text.</a>
      </div>
    ...
  </div>
</div>

and some default properties like closing on click on faded area. This is really handy.

In our case, modal-content had some a tags (with ajax click event binded as shown above). Seems legit. But we came across a problem where clicking on the a tag closed the modal.

I went into debug and finally came accross event bubbling. Bootstrap defines a click event on the faded area which closes the modal. The click event we binded with a tag was bubbling to outer div’s click event which caused the modal to close.

To solve this problem, we used event.stopPropagation()(on a tag click event) which would not let the event bubble to the outer div.

References: