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

前端之家收集整理的这篇文章主要介绍了如果使用jQuery val()或JavaScript更改值,则输入事件不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我以编程方式更改输入字段的值,则不会触发输入和更改事件.例如,我有这种情况:
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>

问题:当我在文本字段中输入时会触发事件,但是当我按下按钮时则不会触发.有没有办法通过某种事件或其他方式实现这一点而无需手动完成?

我不想做的事情:我可以通过我的所有代码手动添加触发器或函数调用,但这不是我正在寻找的.

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

解决方法

简单解决方

调用val()后触发输入:

$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>

具体方案:

如上所述,您不希望手动触发输入.此解决方案通过覆盖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

PS

请注意条件中的this.is(‘input:text’).如果要为更多类型触发事件,请将它们添加到条件中.

猜你在找的jQuery相关文章