如果通过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

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

因此，您必须手动触发'change‘事件，一旦您将val()的输入值设置为，您就可以为该事件链接trigger()

$("#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

如果您不是更改值的人，那么我认为只有一种方法可以触发更改，您必须在输入上放置一个setTimOout()函数，该函数将获取<p>的值，并检查它是否与前面的值不同。

(在页面加载中，捕获<p>值，并在每次运行setTimeOut()时更新该值)。

如果不同，则使用jQuery触发更改。