Baseline change event not activated for selected field selected by jQuery
I have a button that, when clicked, sets the value of the select box and also has a change event for the select box. The "change select [name = location_id]" event works for normal mouse / keyboard selections, but the "change select [name = location_id]" event is not fired when a button is clicked that uses jQuery to change the value of the select box.
How do I change 'select select [name = location_id]' when the field changes 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'));
}
});
source to share
Update
Also, please ignore the answer below, as according to the MDN input
docs , the event is input
fired only for <input>
and <textarea>
and will not fire for <select>
, since value
of <select>
does not change when any of its options are selected (btw, <input>
with flag type
or radio will also not fire an event input
, since their attribute value
does not change when selected (!).
I'll leave an answer for your reference.
Incorrect value
From MDN
The change event fires for items
<input>
,<select>
and<textarea>
when a user change commits the item's value. Unlike an input event, a change event does not necessarily fire for every change in an item's value.
According to Quirksmode , the event change
is a bug for all IE and Opera.
Try to replace
'change select[name=location_id]': 'updateLocation'
from
'input select[name=location_id]': 'updateLocation'
source to share