如果通过js更改值，则不会触发.change

Question

在我的网页中，js 应用程序正在更改输入的值，但我想要的是在值更改时触发事件。

问题是，当应用程序更改值时，不会触发任何事件，因为值是由 js 更改的，但如果用户输入值，则会触发事件。

这是一个小例子，当您单击 时change button，值会更改，但.change事件不会触发。

如果您手动输入值，.change则会触发。

var i = 0;
$("#id_st").change(function(){
  console.log('This is value',$(this).val())
  $('#p').html($(this).val());
});

$('#change_btn').click(function(){
  i = i+1;
  $("#id_st").val(i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="id_st" type="text" name="st" value="0">
<br>
<button id="change_btn" type="button" name="button">change value</button>
<br>
<p id="p">value</p>

我搜索了我的问题并发现，.trigger('change')但正如我已经告诉过你的那样，该值是由我尚未开发的应用程序更改的，因此无法使用此方法。

请告诉我一个真正解决我的问题的方法。

Answer 1

单击时，不会触发button#change_btn的更改事件。input#id_st这是因为input元素要发射change事件的元素，首先它的值必须改变，然后它必须失去焦点。因此，当您单击按钮时，它的值已经改变，但以后它永远不会失去焦点。

因此，您必须手动触发“更改”事件，一旦您使用astrigger()设置输入值，就可以链接该事件val()

$("#id_st").val(i).trigger('change')

您可以在MDN中了解更多信息

演示：

$("#id_st").val(i).trigger('change')

var i = 0;
$("#id_st").change(function(){
  console.log('This is value',$(this).val())
  $('#p').html($(this).val());
});

$('#change_btn').click(function(){
  i = i+1;
  $("#id_st").val(i).trigger('change');
});

编辑：

好吧，如果你不能使用trigger(). input您可以按照@Mohammad 的建议定期检查值的变化。