以编程方式更改输入值时如何触发 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()或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()行为类似于表单提交 - 基本上当提交时的值更改时，控制台将记录。 为了对文本输入进行操作，您需要使用输入，如下所示：

 $("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 3

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

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

changeTextProgrammatically( "A" );

我已经更新了小提琴，

Answer 4

您可以使用 DOMSubtreeModified 事件：

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

如果你想火用户和代码更改：

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

此事件被标记为已弃用，有时会占用大量 CPU 时间，但如果小心使用，它也可能非常有效...

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