javascript - jQuery - Detect value change which use .val() function - Stack Overflow

admin管理员组

文章数量:1384166

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

• javascript
• jquery

Share Improve this question Follow asked Dec 15, 2014 at 4:01 Bruce XuBruce Xu 35311 gold badge44 silver badges1111 bronze badges 4

• 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 watch function : 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 the val() code and I set a setInterval to 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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

My 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,

本文标签： javascriptjQueryDetect value change which use val() functionStack Overflow