jQuery onchange 检测

Question

我想执行 html 元素的“onchange”属性中的 javascript。所以..

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

使用该示例，我想通过 jQuery 执行 alert('test'); 部分，问题是 .change() 事件处理程序不是不起作用，因为我想在另一个元素更改其值后执行它。所以..

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

这是我想执行onchange的时候。之后 .val val 被调用。有什么想法吗？

Answer 1

.val() 不会触发 change 事件。您需要自己手动执行此操作。例如：

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

您可以将其封装在一个小的 jQuery 插件中，如下所示：

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

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

Answer 2

我认为当字段值发生变化时 onchange 事件总是触发是有道理的。因此，我会更改 JQuery 本身中的 val 函数，而不是创建自定义函数。这样，您就不必担心使用哪个函数来设置对象的值，并且如果您已经使用过 JQuery，则不必更改所有 val 调用编写您的应用程序。这是代码：

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

Answer 3

不久前我也遇到了同样的问题，但找不到任何好的解决方案。似乎最好的解决方案是对输入进行“拉动”，或者从实际更改输入内容的代码中触发 onchange 函数（如 Domenic 所示）。

Answer 4

如果你先
input.focus(); 然后 $.val('abcd'); 将触发更改事件。
取自 jquery 站点。

Answer 5

我会重新设计并开始使用 knockout.js 插件，该插件使用数据绑定，让您可以轻松使用所有绑定。

示例代码如下：

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

this.fullName = ko.computed(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("行星", "地球"));