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:
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
a tag click event) which would not let the event bubble to the outer div.