检测字段是否使用 JavaScript 或 jQuery 更新

Question

我有一个非常广泛的模板，并且有一个表单用 JavaScript 或 jQuery 更新一个文本字段的值，这个函数一直找不到它，我需要检测这个字段什么时候更新，我已经尝试了所有这些功能，但它没有检测到它何时更新。

从JavaScript更新字段时未检测到，但在字段外写入并单击时更新时检测到的原因是什么？

重要提示：动态添加的值 90,000”，使其成为一个特定的函数，我一直无法找到，并尝试检测该值是否随 JavaScript 发生变化。

$(function(){

// Automatic update, strange function
setTimeout(function(){
  // Value updated automatically
  $('#long').val("90.000");
}, 2000);

/**
 * Detect if that field is updated
 */
$('input#long').on('change', function(){
  alert("Updated");
});

$(':input').on('change', function(){
  alert("Updated");
});

$('input#long').change(function(){
  alert("Updated");
});

$(document).on('change', 'input#long', function(){
  alert("Updated");
});  

$(document).on('change', 'input', function(){
  alert("Updated");
}); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">

Answer 1

因此，根据您对其他答案的编辑/cmets，您无法手动触发change。

MutationObserver 将是解决此问题的好方法，除非他们无法观察输入值的变化，as explained here。

据我所知，您唯一的出路是每隔几毫秒使用setInterval 将当前值与旧值进行比较。有点丑陋，根本不是最佳的，但可以完成工作。这是一个示例：

$(function() {
  setTimeout(function() {
    $('#long').val('90.000');
  }, 1000);
  
  $('#long').on('change', function() {
    alert('changed');
  });
  
  // Store the current value
  $('#long').data('oldVal', $('#long').val());
  
  // Every 100ms, trigger `change` event whenever new value != old
  setInterval(function() {
    if ($('#long').val() !== $('#long').data('oldVal')) {
      $('#long').trigger('change');
      $('#long').data('oldVal', $('#long').val());
    }
  }, 100);    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">

Answer 2

您可以使用 jquery 中的change 方法来订阅事件。

html

<input class="target" type="text" value="Field 1">

和脚本

$(".target").change(function() {
  alert( "Handler for .change() called." );
});

See this codepen
See the jquery docs

Answer 3

DOM 事件不会被 JS/jQuery 调用触发。您可以轻松地手动触发change 事件，如下所示：

$('#long').val('90.000').trigger('change')

示例：

$(function(){

// Automatic update, strange function
setTimeout(function(){
  // Value updated automatically
  $('#long').val("90.000").trigger('change');
}, 2000);

/**
 * Detect if that field is updated
 */
$('input#long').on('change', function(){
  alert("Updated");
});

$(':input').on('change', function(){
  alert("Updated");
});

$('input#long').change(function(){
  alert("Updated");
});

$(document).on('change', 'input#long', function(){
  alert("Updated");
});  

$(document).on('change', 'input', function(){
  alert("Updated");
}); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">

Answer 4

您是否尝试过按键释放时直接触发的按键触发？

$(function(){

// Automatic update, strange function
setTimeout(function(){
  // Value updated automatically
  $('#long').val("90.000");
}, 2000);

/**
 * Detect if that field is updated
 */

$( "#long" ).keyup(function() {
  alert( "Handler for .keyup() called." );
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">

Answer 5

使用keyup 和paste 代替change。见keyup()

$(function(){

// Automatic update, strange function
setTimeout(function(){
  // Value updated automatically
  $('#long').val("90.000");
}, 2000);

/**
 * Detect if that field is updated by key press or pasting text
 */
$(document).on('keyup paste', 'input', function(){
  alert("Updated text field");
}); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">

change()

change 事件会在元素值更改时发送到元素。这个 事件仅限于 input 元素、textarea 框和 select 元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时，会立即触发事件， 但对于其他元素类型，事件被推迟到 元素失去焦点。