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

使用.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()来捕获每次经过一段时间后输入值的任何变化

这是使用trigger setInterval()进行事件而不需要在不受控制的应用程序中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 2

在button#change_btn上单击，将不会触发input#id_st的change事件。这是因为对于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 3

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

Answer 4

在对MDN网络文档进行了一些研究之后，我发现了一些有关手动触发事件Dispatch Event Function Examples的内容

under providers:
{ provide: APP_BASE_HREF, useValue: '/MyApp' },

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

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

4 个答案: