Clicks delegation not working in some cases

[sergkh]

When using twitter bootstrap dropdowns (http://twitter.github.com/bootstrap/javascript.html#dropdowns) I've found that local links which are in menu section ignore davis completely. After some not very deep searching I've found that changing binding to document.body helps to solve the problem:

...
Davis.$(document.body).delegate(this.settings.linkSelector, 'click', clickHandler)
...

I'm not a javascript guru to say why selector fails, but it behaves like that on all browsers that I've tested.

Thanks for the great library!

[dumbmatter]

I noticed this same problem with Bootstrap dropdown menus when I upgraded to Bootstrap 2.1. It all worked fine before then. I worked around the problem by just using the old bootstrap-dropdown.js from Bootstrap 2.0.2 along with all the other files from 2.1, which seems to work fine.

Although I just noticed Bootstrap is up to version 2.2 now, so YMMV.

[olivernn]

Thanks for reporting this, could someone put together a simple test case that reproduces this.

Also what version of both bootstrap and davis have you seen this issue in?

[dumbmatter]

Here it is with davis.js 0.9.6 and Bootstrap 2.2.1. The "normal link" and the links in the dropdown all point to the same place, but davis.js doesn't seem to notice the ones in the dropdown. This happens in both Firefox and Chrome.

I first noticed the problem with davis.js 0.9.1 and Bootstrap 2.1.0, but it worked fine back when I used Bootstrap 2.0. So if you switch out the Bootstrap JavaScript file for an old version (2.0.4 in this case), it starts working again.

So somewhere between here and here it stopped working with davis.js, and that persists through the latest version.

[olivernn]

I've forked that fiddle and added a class to all the links that you want to be picked up with davis. This seems to make it work and may be an acceptable work around. I'm not sure if this is a problem, but the dropdown doesn't close after the clicks on the items inside it…

This makes me think this is to do with the specificity of the selector that both davis and bootstrap are binding to, I'll keep investiagting and see what changed in the newer versions of bootstrap and see if this is something that davis can handle more gracefully.

[dumbmatter]

If any poor souls like me are still bugged by this problem... I don't really understand it, but I figured out a fairly clean fix. Find something like this near the bottom of bootstrap-dropdown.js:

  $(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
    .on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown)

Replace it with something more like the old version:

  $(function () {
    $('html').on('click.bs.dropdown.data-api', clearMenus)
    $('body').on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
  })

and everything seems to work.