Delegated click event not firing on descendants

Question

I have a view that is a <select> that has a method I want called whenever a click event happens on it or an <option>.

The view looks like this:

mySelect = Backbone.view.extend({
    el: '.my-select',
    events: {
        'click': 'isSelected'
    },
    isSelected: function(e) {
        console.log(e.currentTarget.tagName);
    }
});

Currently, isSelected() only fires when I click on the select itself and not the options.

I've tried 'click option', 'click *', and 'click .my-select > option'.

What am I missing?

Which browser are you testing on? https://www.fxsitecompat.com/en-CA/docs/2016/events-on-option-no-longer-bubble-up-to-select-in-multi-process-firefox/. Also, is there a reason you need to listen for `click` and not `change`? — Eric Guan, Aug 18 '16 at 05:32
@EricGuan, this is in Chrome. Currently I'm listening for `change` and I'm hiding the select. However when the same option is clicked, the `change` doesn't fire, and the select is still visible :\ — rhinosforhire, Aug 18 '16 at 06:09

score 0 · Accepted Answer · edited May 23 '17 at 11:45

What I'm trying to do isn't possible and the reason is entirely unrelated to Backbone! The problem is that in most browsers mouse/keyboard events do not fire on options.

From MDN:

Historically, Firefox has allowed keyboard and mouse events to bubble up from the element to the parent element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

The SO answer that led me to MDN: onclick on option tag not working on IE and chrome

Delegated click event not firing on descendants

1 Answers1