Применить событие изменения в скрытом поле ввода обновляется динамически

Question

Я хочу применить событие изменения, когда значение скрытого поля ввода изменяется, это скрытое поле ввода динамически обновляется.

Ниже приведен мой код,

Скрытый ввод: <input name="hiddenInput" type="hidden" value="25194">

Изменить код события jQuery, который я сейчас использую:

$('input[name="hiddenInput"]').bind("change", function() {
        var hiddenValue = $('input[name="hiddenInput"]').val();
        alert(hiddenValue);
});

Примечание: Я знаю, что есть много вопросы уже публикуются и отвечают по всему rnet, но все говорят о получении значения скрытого поля при нажатии кнопки et c. Я знаю, что если я изменю атрибут со скрытого на текстовый, это может сработать, но это требование моей системы, поэтому я не могу измениться. Я еще не нашел своего ответа, пожалуйста, помогите мне.

Answer 1

это скрытое поле ввода динамически обновляется

Если вы считаете, hidden input обновление socket или ajax или et c вы необходимо добавить .change() на этот вход при обновлении:

$('input[name="hiddenInput"]').on("change", function() {
  var hiddenValue = $('input[name="hiddenInput"]').val();
  console.log(hiddenValue);
});

setInterval(function() { // simulate data update automatically!
  let v = Math.floor(Math.random()*90000) + 10000;
  $('input[name="hiddenInput"]').val(v).change(); // -> just add this!
}, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="hiddenInput" type="hidden" value="25194">

---

Второе решение

Также вы можете сравнить старое значение с новыми динамиками c значение, как показано ниже, или сохраните старое значение в data-value.

$('input[name="hiddenInput"]').on("change", function() {
  var hiddenValue = $('input[name="hiddenInput"]').val();
  console.log(hiddenValue);
});

setInterval(function() {
  let newValue = Math.floor(Math.random() * 90000) + 10000;
  let oldValue = $('input[name="hiddenInput"]').val();
  $('#old').text(oldValue)
  $('input[name="hiddenInput"]').val(newValue);
  if (newValue != oldValue) {
    console.log('changed')
  }

}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="hiddenInput" type="text" value="25194"> <!-- change type to hidden later -->
<span>Old value is: </span><span id="old"></span>