如果通过 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事件，首先它的值必须更改，然后必须失去焦点。因此，当您单击该按钮时，它的值已更改，但以后从未获得焦点以松开它。

因此，您必须手动触发"change"事件，一旦您将输入的值设置为 trigger() 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值的变化。

Answer 2

使用.on('input')和trigger('input')

var i = 0;
$("#id_st").on('input',function(){
  console.log('This is value',$(this).val())
  $('#p').html($(this).val());
  // you may need to update i here to start from it after change
  i = parseInt($(this).val());
});
$('#change_btn').click(function(){
  i = i+1;
  $("#id_st").val(i).trigger('input');
});

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

对不起！！ 这里的误会..不幸的是，我所知道的是：如果没有事件/操作和输入之间的关系，您就无法使change事件本身触发。或者，您必须使用setInterval()来捕获每个时间后输入值的任何变化

这是如何使用setInterval() trigger事件，而无需在不受控制的应用程序中trigger事件

var i = 0;
$("#id_st").on('input',function(){
  console.log('This is value',$(this).val())
  $('#p').html($(this).val());
  // you may need to update i here to start from it after change
  i = parseInt($(this).val());
});
$('#change_btn').click(function(){
  i = i+1;
  $("#id_st").val(i);
});
// setInterval every 5 seconds
setInterval(function(){
  $("#id_st").trigger('input');
} , 5000);

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

Answer 3

在对 MDN Web 文档进行了一些研究后，我发现了一些关于手动触发事件的东西 调度事件函数示例

var i = 0;
$("#id_st").change(function(){
  console.log('This is value',$(this).val())
  $('#p').html($(this).val());
});
$('#change_btn').click(function(){
  var event = new Event('change');
  var target = document.getElementById('id_st');
  i = i+1;
  $("#id_st").val(i);
  target.dispatchEvent(event);
});

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

Answer 4

如果你不是更改值的人，那么我认为只有一种方法可以触发更改，你必须在输入上放置一个 setTimOout（） 函数，该函数将获取<p>的值并检查它是否与以前的不同。
（在页面加载中捕获<p>值，每次运行 setTimeOut（） 时都会更新该值）。
如果它不同，则使用 jQuery 触发更改。