Develop Reference

Change event not firing for programmatic changes

I have an HTML select dropdown whose value may be edited programmatically. My change event fires when the user edits the value from the page, but not when the value is changed in the code. I need the event to fire in both cases. Any ideas on how to accomplish this?
$("#dropdownId").on('change', function () {
//do stuff
});
...
var df = document.frmMain;
df.dropdownId.value = someValue; //change event does not fire

You can use jQuery's .trigger to fire an event. In your case:
$("#dropdownId").trigger("change");

You need to manually fire the event using jquery trigger function after settig the value :
$("#dropdownId").trigger('change');

use jquery to set selection and for fire change event.
$('#'+df.dropdownId).val(someValue).change();

What is the need of .trigger("Change ") in this code

$("#pass").val("").trigger("change");
$("#pass_con").val("").trigger("change");
What s the use of using trigger statement here

On change event occurs when user enters values manually, i.e. events initiated by user and not the JS code. Setting the value using .val() do not trigger change event.
Thus,.trigger("change"); or .change(); needs to be used for triggering change event attached to it.

May be there are change listeners registered on #pass, #pass_con elements.
Changing the value of these nodes programatically will not trigger a change event.
Manually triggering the change event for the listeners to be notified.

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'));
}
});

Update
Also, please disregard the below answer, since as per the MDN input event docs, the input event only fires for <input> and <textarea> and will not fire for <select>, since the value of <select> doesn't change when any of its options are selected (btw, <input> with type checkbox or radio will also not emit an input event since their value attribute is not changed on selection(!).
I'll leave the answer up for reference.
The following is incorrect
From the MDN
The change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element's value.
According to Quirksmode, the change event is buggy for all IE and Opera.
Try replacing
'change select[name=location_id]': 'updateLocation'
with
'input select[name=location_id]': 'updateLocation'

All you need is to add an event:
this.$('select[name=location_id]').val(this.model.get('hd_location_id')).trigger('change');

To trigger the change event on backbone after you change something with jquery you need to trigger the change event.
elem.trigger('change')
http://api.jquery.com/trigger/

Programmatically changing checkbox does not fire change event

I have the following code here:
$('input[type="checkbox"][id="gridlines"]').change(function () {
alert('hello world');
});
$('#gridlines').prop('checked', true);
When I load my page, the checkbox is checked, but the "hello world" does not get prompted.
However, when I click on the checkbox manually, "hello world" gets prompted.
What gives?

You need to call change() or use trigger() to tirgger the change event when values is changed through code.
Using .change()
$('#gridlines').prop('checked', true).change();
Using .trigger()
$('#gridlines').prop('checked', true).trigger("change");

That is how it is suppose to work, only user interaction is support to trigger the change event
You can trigger it manually using .change()/.trigger('change');
$('#gridlines').prop('checked', true).change();
change
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.

OnChange event does not work properly

My OnChange event does not work properly - I want to trigger a function when user changes a textbox's value. But in my tests I have seen that the function triggers when textbox's value changes and textbox loses focus. Something wrong with my browser? Or is it about the ability of JavaScript? If the last one is true how can I can do that? Thanks in advance.

onchange event will trigger when an input field loses focus or when an option is selected from a dropdown menu, that's normal behavior.
If you want an event that will be triggered as the user types in an input field, you can use onkeypress, onkeydown or onkeyup events.

You could do with jquery:
$("textbox_id").keyup(function(){
//do something here
});

write the jquery code on keyup event and blur event also, because if user paste some copied data into textbox by using mouse only in that case only blur event called by jquery.