当使用编程方式改变输入值时，如何触发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' />

但是它不起作用。我如何使其工作？

- Mohammad

Answer 1

只有当用户输入内容并失去焦点时，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' />

- Pranav C Balan

---

在程序中，当您以编程方式更改输入的.val()并设置.focus()以便将光标放置在添加值文本的末尾时，是否需要调用.change()？我发现当我这样做时，然后单击输入框外部，它会清除输入框... - Akin Hwan

@AkinHwan：change()方法是用于在程序中触发方法的，因为val()方法不会触发更改事件。 - Pranav C Balan

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' />

- kawnah

Answer 3

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

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

changeTextProgrammatically( "A" );

我已更新了这个fiddle。

- pedromendessk

Answer 4

您可以使用DOMSubtreeModified事件：

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

如果您想同时应用用户和代码更改，请使用以下操作：

both

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

这个事件被标记为已弃用，有时会消耗大量CPU时间，但是如果小心使用，它也可能非常高效...

- Dr Fred

Answer 5

当用户输入并失去焦点时，jquery更改事件才起作用。因此，您可以使用以下解决方法来实现：- 假设您有一个按钮，单击该按钮会导致输入值发生更改。（这也可以是其他任何东西，而不是按钮）

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

- Arun Kumar