Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

更改事件仅在用户键入输入时触发，然后失去焦点。

您需要使用 change() 或 trigger('change')

手动触发事件

＆＃13;

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

＆＃13;

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

＆＃13;

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

我已更新fiddle，

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

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

5 个答案: