.change не срабатывает, если изменить значение на js

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'), но, как я уже говорил, это значение изменяется приложением, которое я не разработал, поэтому могу 't использовать этот метод.

Пожалуйста, скажите мне реальное решение моей проблемы.

Answer 1

Проведя некоторое исследование по веб-документам MDN, я нашел кое-что о событиях ручного запуска Функция отправки события Примеры

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 2

При нажатии 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().Вы можете периодически проверять изменение значения input, как рекомендует @ Mohammad.

Answer 3

Если вы не тот, кто изменяет значение, то я думаю, что есть только один способ вызвать изменение, вам нужно поместить функцию setTimOout () на вход, которая примет значение <p> и проверьте, не отличается ли это от предыдущего.
(При загрузке страницы фиксируйте значение <p> и каждый раз, когда ваш setTimeOut () обновляет это значение).
Если оно отличается, инициируйте изменение с помощью jQuery.

Answer 4

используйте .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>