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

Question

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

$("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' />

但是没用。我怎样才能使这项工作？

Answer 1

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

您需要使用change() or 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' />

Answer 2

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

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

changeTextProgrammatically( "A" );

我更新了 fiddle,

Answer 3

您可以使用 DOMSubtreeModified 事件：

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

如果您想触发用户和代码更改：

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

此事件已被标记为已弃用，有时 CPU 非常耗时，但如果谨慎使用它也可能非常有效...

Answer 4

事件处理程序 .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' />

Answer 5

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;
})

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

How to fire JQuery change event when input value changed programmatically?

html

javascript

jquery

onchange