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

Question

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

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

这是一个小例子，当你点击change按钮时，值被改变但是.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 事件，首先它的值必须改变，然后它必须失去焦点。因此，当您单击该按钮时，它的值已更改，但它永远不会获得焦点以在以后松开它。

因此，您必须手动触发 'change' 事件，一旦您使用 val() 将输入值设置为

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

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

演示:

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

<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()。您可以按照@Mohammad 的建议定期检查input 值的变化。