堆栈内存溢出
  繁体   English   中英

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

[英]Input event not working if value is changed with jQuery val() or JavaScript

 原文  2016-06-07 18:37:15  7   8    javascript/ jquery/ html/ events/ input

问题描述

如果我以编程方式更改输入字段的值，则不会触发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>

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

我不想做的事情：我可以遍历我的所有代码，手动在任何地方添加trigger或函数调用，但这不是我想要的。

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

8 个解决方案

解决方案1
 20 已采纳  2016-06-13 17:33:06

简单方案：

调用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演示

PS

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

解决方案2
 4  2016-06-13 04:24:51

有一些方法可以实现它。 在这里，您可以使用在更改元素时立即发生的oninput() HTML的oninput()事件并调用该函数。 

<input id="myinput" type="text" oninput="sample_func()" />
<button id="change">Change value</button>

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

。 

var input = $("#myinput");

function sample_func(){
  alert(input.val());
}

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

或者这个jQuery， input东西（只与上面的例子有关）。 

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

。 

var input = $("#myinput");

input.on("input", function() {
  alert(input.val());
});

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

您还可以使用javascript setInterval() ，它在给定的间隔时间内不断运行。 如果您正在进行与时间相关的计划，那么它是唯一可选的。 

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

。 

var input = $("#myinput");

setInterval(function() { ObserveInputValue(input.val()); }, 100);

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

解决方案3
 2  2016-06-07 18:38:55

看起来除了使用.trigger()之外.trigger() 。

让我们使用.change()事件尝试相同的事情： 

 var $input = $("#myinput"); $input.on('change paste keyup', function() { alert($(this).val()); }); $('#change').click(function() { $input.val($input.val() + 'x').trigger("change"); }); 
 <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>

或者您需要手动触发它： 

$('#change').click(function() {
  $input.val($input.val() + 'x').trigger("input");
});

片段 

 var $input = $("#myinput"); $input.on('input', function() { alert($(this).val()); }); $('#change').click(function() { $input.val($input.val() + 'x').trigger("input"); }); 
 <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>

解决方案4
 1  2016-06-18 14:35:08

jQuery侦听器仅适用于实际的浏览器事件，并且在以编程方式更改某些内容时不会抛出这些事件。

你可以创建自己的微型jQuery扩展来代理这个，这样你总是可以触发事件但只需要在一个模块化的地方进行，如下所示： 

$.fn.changeTextField = function (value) {
  return $(this).val(value).trigger("change");
}

然后，只要您想要更新文本字段，而不是使用jQuery的'val'函数，只需调用您的新函数： 

$("#myInput").changeTextField("foo");

这是一个使用代理功能的版本： 

    <!DOCTYPE html>
    <html>
        <head>
            <title>Test stuff</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        </head>
        <body>

  <input id="myInput" type="text" />
        <button id="myButton">Change value</button>

        <script type="text/javascript">
            $.fn.changeTextField = function (value) {
             return $(this).val(value).trigger("change");
            }

            $( document ).ready(function() {
                var $input = $("#myInput");

                $input.on("change", function() {
                    alert($input.val());
                });

                $('#myButton').click(function() {
                    $("#myInput").changeTextField("foo");
                });
            });
        </script>
        </body>
    </html>

作为参考，这个问题在这里已经得到了解答： 为什么当我使用val（）设置select的值时，jquery更改事件不会触发？

在这里： JQuery检测Programatic变更事件

解决方案5
 0  2019-03-25 10:34:07

 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>

解决方案6
 0  2019-04-04 08:41:44

触发器不起作用。 创建一个事件并使用本机JavaScript进行调度完成了这项工作。

资料来源： https ： //stackoverflow.com/a/41593131/6825339 

 <script type="text/javascript">
            $.fn.changeTextField = function (value) {
             return $(this).val(value).dispatchEvent(new Event("input", { bubbles: true });
            }

            $( document ).ready(function() {
                var $input = $("#myInput");

                $input.on("change", function() {
                    alert($input.val());
                });

                $('#myButton').click(function() {
                    $("#myInput").changeTextField("foo");
                });
            });
        </script>

解决方案7
 0  2021-09-23 09:23:20

试试这个

$('#input').trigger('change');

解决方案8
 -1  2016-06-12 00:41:45

$input.val($input.val() + 'x')
$input.trigger('change');

更改事件仅在输入模糊时触发。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用jquery.val（）更改值的事件 如果通过Javascript更改了输入，则jQuery触发事件 通过在 jQuery 中更改 .val() 来更改输入值的事件侦听器？ JavaScript 更改输入值时的事件？ 如何为javascript更改输入值触发事件 用jQuery替换输入值.val（） JQuery：使用.val（）函数不会更改下拉值 以编程方式更改输入值时如何触发 JQuery 更改事件？ 当输入值从 VueJS 更改时，JQuery 更改事件未触发 如果在 jQuery 中更改了多个输入元素的值，则触发更改事件
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM