javascript - 如果使用 jQuery val() 或 JavaScript 更改值，则输入事件不起作用

Question

如果我以编程方式更改输入字段的值，则不会触发 input 和 change 事件。例如，我有这样的场景:

var $input = $('#myinput');

$input.on('input', function() {
  // Do this when value changes
  alert($input.val());
});

$('#change').click(function() {
  // Change the value
  $input.val($input.val() + 'x');
});

<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

问题: 当我在文本字段中键入时触发该事件，但当我按下按钮时不会触发该事件。有没有一种方法可以通过某种事件或其他方式实现这一点而无需手动完成？

我不想做的事情:我可以遍历我的所有代码以手动添加触发器或函数调用，但我不是那样的寻找。

原因:我想自动执行此操作的主要原因是我有很多输入字段和很多不同的地方，我可以在这些地方以编程方式更改这些输入。如果有一种方法可以在我的代码中的任何位置更改任何输入时自动触发事件，那将为我节省很多时间。

Answer 1

简单的解决方案:

在调用 val() 后触发 input:

$input.trigger("input");

var $input = $("#myinput");

$input.on('input', function() {
  alert($(this).val());
});

$('#change').click(function() {
  // Change the value and trigger input
  $input.val($input.val() + 'x').trigger("input");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input id="myinput" type="text" />
<button id="change">Change value</button>

具体解决方案:

如前所述，您不想手动触发 input。此解决方案通过覆盖 val() 自动触发事件。

只需将此添加到您的代码中:

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        var res = originalVal.apply(this, arguments);

        if (this.is('input:text') && arguments.length >= 1) {
            // this is input type=text setter
            this.trigger("input");
        }

        return res;
    };
})(jQuery);

参见 JSFiddle Demo

附言

注意条件中的 this.is('input:text')。如果您想触发更多类型的事件，请将它们添加到条件中。