Bind backbone event to a multiple class selector

Question

I can't get the following event to attach to my element.

events = {
   "change .date-selector .date-range": "dateRangeSelectionChanged"
}

Is this supported at all in Backbone.js? Or am I using a wrong syntax?

your syntax looks fine: http://backbonejs.org/#View-delegateEvents — Scott Bartell, Apr 12 '13 at 07:57
Are you able to go to the console window and use jQuery to select your elements. $(".date-selector .date-range").length this should return at least 1. Also check to see if the dateRangeSelectionChanged has the correct spelling and camel case format. I would also check either using the developer tools in IE or FireBug in FireFox and check to see if you see any error messages. — Kalpers, Apr 15 '13 at 01:01

score 23 · Answer 1 · answered Feb 26 '14 at 23:23

23

You can separate the selectors by comma(',')

events: { "change .date-selector,.date-range": "dateRangeSelectionChanged" }

answered Feb 26 '14 at 23:23

techvineet

1

Good tip. However, I think that would do a logical `OR` than `AND`, to do and `AND` selector separate them by dots and no spaces in between. Please correct me if I'm wrong as I haven't tried this. – orad Mar 03 '14 at 22:51

score 6 · Accepted Answer · answered Nov 11 '13 at 15:06

6

To select upon multiple classes you should use:

events = { "change .date-selector.date-range": "dateRangeSelectionChanged" }

Note the removed space between classes

answered Nov 11 '13 at 15:06

user2846569

Yes, the extra space seems to be the problem. Thanks. – orad Nov 12 '13 at 00:13
This is NOT required anymore. Spaces are now handled appropriately by Backbone. Refer the examples: http://backbonejs.org/#View-delegateEvents (The actual problem for me was that the view wasn't attached to the DOM object.) – Deepak Joy Cheenath Jul 27 '15 at 06:03
1

Use @techvineet answer, since this one is out dated. – hharnisc Apr 25 '16 at 15:32
How this is outdated? @hharnisc – user2846569 Jun 27 '17 at 09:42

score 0 · Answer 3 · answered Jul 10 '13 at 15:08

0

I think your problem is that you have an equals operator where you should have ':'

App.Namespeace.BestViewEver = Backbone.View.extend({
  events : { 
    "change .date-selector .date-range": "dateRangeSelectionChanged"
  }
});

answered Jul 10 '13 at 15:08

cbaigorri

Thanks for the answer. I forgot to mention that this is TypeScript code and equal sign is valid there. I don't have it anymore in my app so don't know what was the problem but Kalpers' comment is useful. – orad Jul 11 '13 at 06:35

3 Answers3