$('input').change(function(){
alert($(this).val());
});
$('input').val(1);
This dont work. I need capture the change input with JavaScript :-s
Thanks.
3 Answers
Programmatic changes to <input> elements don't cause events. Only user interaction does.
You can do this however:
$('input').val(1).trigger('change');
3 Comments
Mathew Thompson
He's asking how to capture the event, not how to throw it :)
Pointy
@mattytommo the problem is that there is no event created when you programmatically change the value of an element like that. The "change" event handler already there is fine for catching the event.
Mathew Thompson
Ah I see, I didn't realise he's trying to throw the event himself, my bad. +1 for you :)
You have to put those functions inside the "Ready" function. see the fiddle: http://jsfiddle.net/SfjJQ/1/
$(function() {
$('input').change(function() {
alert($(this).val());
});
$('input').val(1);
$('input').trigger('change');
});
keep in mind that your:
$('input').val(1);
initializes the input to have a value of 1.
Of course you could also do this:
$(function() {
$('input')
.change(function() {
alert($(this).val());
})
.val(1)
.trigger('change');
});
answered Apr 4, 2012 at 14:50
jeffery_the_wind
18.3k35 gold badges109 silver badges165 bronze badges
3 Comments
Pointy
No event is triggered by the call to
.val().Pointy
My interpretation of the question is that Mr. User expected the call to
.val(1) to trigger the "change" handler. I could be wrong; the question is sparse and enigmatic.jeffery_the_wind
yeah i see what you mean, I added another line to trigger the change event at page load.
As others have mentioned, .val() does not trigger any events; however, you could add a wrapper function to jQuery that will change the value and trigger the event if wanted:
$( function () {
//-- new jQuery function
$.fn.changeVal = function () {
$.fn.val.apply( this, arguments );
$( this ).trigger( 'change' );
};
//-- your updated code
$('input').change(function(){
alert($(this).val());
});
$('input').changeVal(1);
} );
<script>tag after all the<input>elements on the page, or inside a "ready" or "load" handler). I interpreted your question as being about the fact that the call to.val()does not trigger the "change" handler.