How to Prevent Bootstrap Dropdowns from Closing on Click Inside?

Avoid Dropdown Menu Close on Click Inside

In Bootstrap dropdowns, menu items default to closing upon any click, even those contained within the dropdown itself. While attaching a click event handler to the dropdown menu with event.stopPropagation() resolves this issue, it can lead to problems with delegated events for carousel controls.

Solution:

To handle this dilemma, a more precise event delegation approach is required:

<code class="js">$(document).on('click', 'dropdown .dropdown-menu', function (e) {
  e.stopPropagation();
});</code>

This delegates the click event to the desired container, ensuring that clicks within it don't trigger the dropdown's closing.

The above is the detailed content of How to Prevent Bootstrap Dropdowns from Closing on Click Inside?. For more information, please follow other related articles on the PHP Chinese website!