Billy Shih Billy Shih - 6 months ago 28
jQuery Question

Backbone change event not fired for select field selected by jQuery

I have a button that when clicked sets the value of a select field and also have a change event for the select field. The 'change select[name=location_id]' event works when selecting normally via mouse/keyboard but clicking the button, which uses jQuery to change the select field value, doesn't fire off the 'change select[name=location_id]' event.

How do I get the 'change select[name=location_id]' to fire when changing the field via jQuery?

SubscriptionsModule.Views.SubscriptionEditView = Backbone.Marionette.LayoutView.extend({
template: "subscriptions/edit",
events: {
'click #home-delivery-select': 'selectHomeDeliverySite',
'change select[name=location_id]': 'updateLocation'
},
selectHomeDeliverySite: function() {
this.$el.find('select[name=location_id]').val(this.model.get('hd_location_id'));
},
updateLocation: function(e) {
//update location code
},
updateOrderSize: function(e) {
SubscriptionsModule.eventManager.trigger('updateOrderSize', $(e.currentTarget).data('price'));
}
});

u.k u.k
Answer

All you need is to add an event:

this.$('select[name=location_id]').val(this.model.get('hd_location_id')).trigger('change');
Comments