Programmatically changing checkbox does not fire change event - javascript

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.

Related

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/

Why browser doesn't fire change event

I have
<input type="text" id="pies" value="" />
and
$( document ).ready(function() {
$('#pies').on('change', function() { alert('cham'); });
$('#pies').focus();
$('#pies').val('kooooo');
$('#pies').blur();
});
Why browser doesn't fire change event? How can I make that browser will fire change event. I don't want to trigger "change" manually, because if I will trigger change, in some cases trigger change will be triggered twice. This is only example.
Call the change using :
$('#pies').change();
You have to do it manually
$('#pies').change();
As docs says
The change event is sent to an element when its value changes. This event is limited to elements, boxes and elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
In auto complete case try to do $("#pies").trigger("autocompleteselect");
Better use keypress instead of change

Why does dynamically changing a checkbox not trigger a form change event?

I wrote this snippet of javascript/jQuery to change a check box.
http://jsfiddle.net/johnhoffman/crF93/
Javascript
$(function() {
$("a").click(function() {
if ($("input[type='checkbox']").attr('checked') == "checked")
$("input[type='checkbox']").removeAttr('checked');
else
$("input[type='checkbox']").attr('checked', 'checked');
return false;
});
$("input[type='checkbox']").change(function(){
console.log("Checkbox changed.");
});
});​
HTML
<input type="checkbox" />
Change CheckBox​
Interestingly, clicking the link alters the text box, but does not trigger the form change event that calls the function that logs a message in Chrome Web Developer Console. Why? How do I make it do that?
You need to trigger the change event, .trigger('change'), so that event knows that a change took place.
From http://api.jquery.com/change/:
Description: Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
This method is a shortcut for .on( "change", handler ) in the first two variations, and .trigger( "change" ) in the third.
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
Demo:
http://jsfiddle.net/nPkPw/3/
Using chaining: http://jsfiddle.net/nPkPw/5/
i.e. $("input[type='checkbox']").trigger('change').attr('checked', 'checked');
This isn't surprising, but I guess you could as this to the list of non-effect in the msdn.
"This event is fired when the contents are committed and not while
the value is changing."
"The onchange event does not fire when the
selected option of the select object is changed programmatically."
You could always just .click() it jsFiddle

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.

Categories

Resources