Something's wrong with event delegation

[olmokramer]

I use this code to add events to my backbone view:

  events: {
    'click #menu-open-button': function() {
      console.log('#menu-open-button clicked');
    },
    'click .menu-item.has-sub-menu > a': function(event) {
      console.log('.menu-item.has-sub-menu > a clicked');
    },
    'click .menu-item:not(.has-sub-menu) a': function() {
      console.log('.menu-item:not(.has-sub-menu) a clicked');
    }
  }

And this is the html I use:

<nav id="menu">
  <ul class="menu-items">
    <li class="menu-item">
      <a href="#item-1">item-1</a>
    </li>
    <li class="menu-item has-sub-menu">
      <a href="#item-2">item-2</a>
      <ul class="menu-items">
        <li class="menu-item"><a href="#sub-item-1">sub-item-1</a></li>
        <li class="menu-item"><a href="#sub-item-2">sub-item-2</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#item-3">item-3</a>
    </li>
    <li class="menu-item">
      <a href="#item-4">item-4</a>
    </li>
  </ul>
  <div id="menu-bar" class="menu-bar">
    <div class="wrapper">
      <div id="menu-logo"></div>
      <div id="menu-open-button">menu</div>
      <div id="menu-search-button"></div>
    </div>
  </div>
</nav>

The view's el property is the ul#menu element.

When I click the #menu-open-button it logs

#menu-open-button clicked
.menu-item.has-sub-menu > a clicked

This shouldn't happen, because neither of the elements are (grand)children or siblings of one another.

And when I click a .menu-item:not(.has-sub-menu) a it executes all three event handlers. This should definitely not happen, because the last two events should be mutually exclusive...

Backbone passes the correct values to $el.on. This happened in version 1.0.27 but in version 1.0.26 everything was still fine.

[kupriyanenko]

Hello @olmokramer,

I will check tomorrow this case. Thanks for feedback.

[kupriyanenko]

Thanks for critical bug, fixed and released in 1.0.28

[olmokramer]

Wow, that's fast :) thanks!