最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery onchange detection - Stack Overflow

programmeradmin8浏览0评论

I want to execute javascript that's in the "onchange" attribute of an html element. So..

<input id="el" type="text" onchange="alert('test');" value="" />

Using that example I'd like to execute the alert('test'); portion via jQuery, the problem is the .change() event handler isn't working, because I want to execute it after another element changes it's value. So..

$('#el').val('test');

This is when I'd like to execute the onchange. After that .val val has been called. Any ideas?

I want to execute javascript that's in the "onchange" attribute of an html element. So..

<input id="el" type="text" onchange="alert('test');" value="" />

Using that example I'd like to execute the alert('test'); portion via jQuery, the problem is the .change() event handler isn't working, because I want to execute it after another element changes it's value. So..

$('#el').val('test');

This is when I'd like to execute the onchange. After that .val val has been called. Any ideas?

Share Improve this question edited Jan 29, 2012 at 13:20 PeeHaa 72.7k60 gold badges194 silver badges264 bronze badges asked Mar 18, 2011 at 8:15 CalebCaleb 311 silver badge4 bronze badges 2
  • Could you please add more descriptions of which elements or what code you are talking about? It's easier to read the first element, which has an onchange attribute than just the other element. – joar Commented Mar 18, 2011 at 8:19
  • 1 Avoid using inline JavaScript. Attach the change handler using jQuery, and it will be easier to manage. – Matthew Schinckel Commented Mar 18, 2011 at 8:21
Add a ment  | 

5 Answers 5

Reset to default 7

.val() does not trigger change events. You need to do so yourself, manually. For example:

$('#el').val('test').change();

You can encapsulate this in a small jQuery plugin like so:

(function ($) {
    $.fn.changeVal = function (text) {
        this.val(text).change();
    };
}(jQuery));

$('#el').changeVal('test');

I think it makes sense that the onchange event ALWAYS fires when the value of the field changes. Thus, I would change the val function in JQuery itself rather than make a custom function. That way, you don't have to worry about which function you use to set the value of an object, and don't have to go change all of your val calls if you've already used JQuery to code your app. Here's the code:

//Store the old val function
$.fn.custom_oldVal = $.fn.val;

//Update the val function to fire the change event where appropriate:
$.fn.val = function(value) {
    if(value == null || value == undefined){
        return this.custom_oldVal();
    } else {
        //Only call onchange if the value has changed
        if(value == this.custom_oldVal()){
            return this;//Return this object for chain processing
        } else {
            return this.custom_oldVal(value).change();
        }
    }
}

I had the same problem a while ago, but couldn't find any good solutions to it. It seems the best solution is to do a "pull" on the input, or to fire your onchange function (like Domenic shows) from the code that actually changes the content of the input.

if you first
input.focus(); then $.val('abcd'); a change event will be fired.
taken from jquery site.

I Would redesign and start using knockout.js plugin which is using data-bind where let u use all the binding pretty easy.

sample code below:

var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);

this.fullName = ko.puted(function() {
    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
    return this.firstName() + " " + this.lastName();
}, this);

};

ko.applyBindings(new ViewModel("Planet", "Earth"));

发布评论

评论列表(0)

  1. 暂无评论