当输入值以编程方式更改时如何触发JQuery更改事件？

I want to fire the JQuery change event when the input text is changed programmatically, for example like this:

我想在以编程方式更改输入文本时触发JQuery更改事件，例如：

$("input").change(function(){
    console.log("Input text changed!");
});
$("input").val("A");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />

But it doesn't work. How can I make this work?

但它不起作用。我怎样才能做到这一点？

5 个解决方案

#1

change event only fires when the user types into the input and then loses focus.

只有当用户键入输入然后失去焦点时才会触发更改事件。

You need to trigger the event manually using change() or trigger('change')

您需要使用change（）或trigger（'change'）手动触发事件

$("input").change(function() {
  console.log("Input text changed!");
});
$("input").val("A").change();

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

#2

The event handler .change() behaves like a form submission - basically when the value changes on submit the console will log. In order to behave on text input you would want to use input, like below:

事件处理程序.change（）的行为类似于表单提交 - 基本上当值改变时，提交控制台将记录。为了对文本输入进行操作，您需要使用输入，如下所示：

$("input").on('input', function(){
    console.log("Input text changed!");
});
$("input").val("A");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />

#3

What you need to do is trigger the change event after you've set the text. So you may create a function to do that so you won't have to repeat it every time you need to update the text, like this:

您需要做的是在设置文本后触发更改事件。因此，您可以创建一个函数来执行此操作，这样您每次需要更新文本时都不必重复它，如下所示：

function changeTextProgrammatically(value) {
    $("input").val( value );
    $("input").trigger( 'change' ); // Triggers the change event
}

changeTextProgrammatically( "A" );

I've updated the fiddle,

我已经更新了小提琴，

#4

You can use the DOMSubtreeModified event:

您可以使用DOMSubtreeModified事件：

$('input').bind('DOMSubtreeModified',function(){...})

If you want to fire both user and code changes:

如果要同时触发用户和代码更改：

$('input').bind('input DOMSubtreeModified',function(){...})

This event is marked as deprecated and sometimes quite CPU time consuming, but it may be also very efficient when used carefully...

此事件被标记为已弃用，有时耗费CPU时间，但仔细使用时也可能非常有效...

#5

jquery change event only works when the user types into the input and then loses focus. So you can use the following workaround to do so:- Let's say you have a button clicking on which results in change in value of input. (this could be anything else as well instead of a button)

jquery change事件仅在用户键入输入然后失去焦点时才起作用。因此，您可以使用以下解决方法： - 假设您单击了一个按钮，这会导致输入值发生变化。（这可能是其他任何东西而不是按钮）

var original_value = $('input').val();
$('button').click(function(){
var new_value = $('input').val();
if(original_value != new_value ){
   //do something
  }
//now set the original value to changed value (in case this is going to change again programatically)
original_value = new_value;
})

#1