We all know that use the val() will not trigger the change event, so we also use .trigger('change') behind the val().
But the problem is that someone write the val() did't with trigger() and it's a external file that I can't edit it.
So, how can I detect value change through some code same like below:
$('.elem').on('change', function(){
// do something
});
We all know that use the val() will not trigger the change event, so we also use .trigger('change') behind the val().
But the problem is that someone write the val() did't with trigger() and it's a external file that I can't edit it.
So, how can I detect value change through some code same like below:
$('.elem').on('change', function(){
// do something
});
- 1 Why not add your own event listener for the element and then listen for the .trigger() event from there? – Aweary Commented Dec 15, 2014 at 4:07
-
1
You might want to see the
watchfunction : stackoverflow./questions/1029241/… – naota Commented Dec 15, 2014 at 4:17 -
@naota I make a demo after learn
watch: jsfiddle/yujiangshui/yfo7rrn8. It works, but the watcher code must above theval()code and I set asetIntervalto monitor the value change.It's a way, but I think it's not a elegant way. Or I'm using in a wrong way? – Bruce Xu Commented Dec 15, 2014 at 6:06 - @Jiangshui OK, I saw your code on the jsfiddle. I guess this article might help you: james.padolsey./javascript/monitoring-dom-properties – naota Commented Dec 15, 2014 at 8:15
5 Answers
Reset to default 1My suggestion is to override jquery's val()
var originalValFn = jQuery.fn.val;
jQuery.fn.val = function() {
this.trigger('change');
originalValFn.apply( this, arguments );
}
jsfiddle: http://jsfiddle/2L7hohjz/js
var originalValFn = jQuery.fn.val;
function getErrorObject(){
try { throw Error('') } catch(err) { return err; }
}
jQuery.fn.val = function() {
if ($(this).hasClass( "element" )) {
var err = getErrorObject();
var caller_line = err.stack.split("\n")[4];
var index = caller_line.indexOf("at ");
var clean = caller_line.slice(index+2, caller_line.length);
console.log(clean);
console.log(arguments);
}
originalValFn.apply( this, arguments );
};
Try:
setTimeout(function() {
if (currentValue != previousValue)
{
// do something
}
}, 500);
Thank you,
I monly use the solution from this post to get around problems like this one:
hidden input change event
watchField('.elem', function(){
//do some stuff here
});
function watchField(selector, callback) {
var input = $(selector);
var oldvalue = input.val();
setInterval(function(){
if (input.val()!=oldvalue){
oldvalue = input.val();
callback();
}
}, 100);
}
Try:
$('.elem').on('keyUp', function(){
// do something
});
or
$('.elem').on('lostFocus', function(){
// do something
});
Thank you,