Prevent the disappear of Dropdown menu using bootstrapDropdown when clicking on the list

Question

I am using using bootstrap-dropdown to generate a Dropdown menu. I would like to prevent the disappearing of the menu when click on it.

I have implemented the following code, but it does not work. Any idea how to fix it?

HTML

<li class="dropdown notification">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <span class="notification-label label label-info">
      <i class="icon-inbox icon-white"></i>
      <span class="notification-number">{{ unread_notifications }}</span>
    </span>
  </a>
  <ul class="dropdown-menu notification-list"></ul>
</li>

JS

events: {
  'click ul.notification-list': 'onClickNotification'
},

onClickNotification: function (e) {
  e.preventDefault();
  console.log(e);
},

score 8 · Accepted Answer · answered Jul 31 '12 at 15:05

8

Did you try with event.stopPropagation?

onClickNotification: function (e) {
    e.stopPropagation();
    console.log(e)
},

answered Jul 31 '12 at 15:05

antonjs

14,060
14
65
91

merv · Answer 2 · 2012-07-31T15:35:59.140

2

If you want to disable all auto closing of the dropdown you can just disable the listener

$('html').off('click.dropdown')

JSFiddle

edited Jul 31 '12 at 15:35

answered Jul 31 '12 at 15:21

merv

67,214
13
180
245

your answer sounds good. I did try it and it does not work. Are you sure? The view is rendered by using backbone but it should be not the issue because the code does not work also after render the page and typing your command in js console. Any idea? – Lorraine Bernard Jul 31 '12 at 15:29
@LorraineBernard I added a jsfiddle. However, I'm thinking you'd prefer [@AntoJs's answer](http://stackoverflow.com/a/11743125/570918), since it only disables closing for clicks on the menu itself. – merv Jul 31 '12 at 15:38
+1 yes you are right. Actually I would like also, in same condition, disable the appearing of menu. Any ideas how to make it without using stopPropagation ? – Lorraine Bernard Jul 31 '12 at 15:44
Anyway any ideas why `$('ul.dropdown-menu').off('click.dropdown')` in your jsfiddle does not work? how should I disable just a menu? – Lorraine Bernard Jul 31 '12 at 15:50
@LorraineBernard Let's chat about it instead of putting a bunch of comments in here: [Discussion on on/off](http://chat.stackoverflow.com/rooms/14704/discussion-on-on-off) – merv Jul 31 '12 at 16:00

Prevent the disappear of Dropdown menu using bootstrapDropdown when clicking on the list

HTML

JS

2 Answers2

JSFiddle

Linked