如果我以编程方式更改输入字段的值，则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或函数调用，但那不是什么我正在寻找。
为什么：我想自动执行此操作的主要原因是我有很多输入字段和许多不同的地方，我以编程方式更改这些输入。如果在我的代码中的任何位置更改任何输入时，如果有一种方法可以自动 ，那么这将节省我很多时间。
答案 0 :(得分：20)
简单解决方案：
致电input后触发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>
具体解决方案：
如上所述，您不想手动触发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);
<强> PS
注意条件中的this.is('input:text')。如果要为更多类型触发事件，请将它们添加到条件中。
答案 1 :(得分：4)
有一些方法可以实现它。在这里，您可以使用在更改元素时立即发生的levelup 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');
});
答案 2 :(得分：1)
除了使用
.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>
答案 3 :(得分：1)
jQuery侦听器仅适用于实际的浏览器事件，当您以编程方式更改某些内容时，不会抛出这些事件。
你可以创建自己的微型jQuery扩展来代理这个，这样你总是可以触发事件但只需要在一个模块化的地方进行，如下所示：
$("#myInput").changeTextField("foo");
然后，只要您想要更新文本字段，而不是使用jQuery＆＃39; val＆＃39;功能：
<!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>
这是一个使用代理功能的版本：
https://www.google.com/maps/search/hotel/@41.959816,12.802226,13z
作为参考，这个问题在这里已经得到了回答： Why does the jquery change event not trigger when I set the value of a select using val()?
答案 4 :(得分：0)
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>
答案 5 :(得分：0)
触发器没有用。创建事件并使用本机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>
答案 6 :(得分：-1)
$input.val($input.val() + 'x')
$input.trigger('change');
更改事件仅在输入模糊时触发。