Question

I am using bootstrap-dropdown to generate a Dropdown menu.
I would like to disable some default behaviour by using jQuery.off.

1) how can I disable the disappear of Dropdown menu on a specific element and not all elements?
2) how can I disable the appearing of menu on a specific element and not all elements?

By using the following code I reach my goal by I would like to apply this behaviour on a specific element and not on all the document.

$('html').off('click.dropdown'); // it disable the disappear of Dropdown menu.
$('body').off('click.dropdown'); // it disable  the appearing of Dropdown menu. 
// Why this differance?

.​​​​

This is the jsfiddle link to test the code.
Thanks to @merv for making the jsfiddle.

Answer 1

You can only use the off() method to disable a binding on a specific element that already has a binding. In pointing out $('html').off(), I was merely trying to demonstrate that the only binding which auto-closes dropdown menus is attached there.

Otherwise, you can add a new binding to elements in dropdown menus to stop the click event from bubbling up to the html element:

$('.dropdown-menu').on('click.dropdown', function(e) {e.stopPropagation()})​​​​​

JSFiddle