jQuery事件委托无法触发input值变更检测？求可行解决方案

为什么change事件不生效？ #

change事件仅在用户手动交互修改输入框内容（比如打字、选择操作）时才会触发，通过jQuery的.val()这类脚本代码直接修改input的value值，不会自动触发change事件，所以你之前写的各类事件绑定都没反应。

三种可行的解决办法 #

1. 手动触发change事件（最简单直接）

在你用.val()更新输入框值之后，手动调用.trigger('change')触发事件，这样之前绑定的change回调就能正常执行：

$('.btn-select').click(function(e){
  e.preventDefault();
  $.ajax({ 
    // 你的AJAX配置内容
    success: function (response) {
      const $input = $('#input-sample');
      const newValue = parseInt($input.val()) - 1;
      $input.val(newValue);
      // 手动触发change事件
      $input.trigger('change');
    }
  });
});

// 现在绑定change事件即可生效
$('#input-sample').on('change', function(){
  if (parseInt($(this).val()) <= 0) {
    // 执行你的后续操作逻辑
    console.log('值已减至0，开始执行后续操作');
  }
});

2. 直接在更新值后检测（更高效）

既然是你的代码主动更新输入框值，完全可以不用依赖事件，直接在更新后判断值是否满足条件，执行后续操作：

$('.btn-select').click(function(e){
  e.preventDefault();
  $.ajax({ 
    // 你的AJAX配置内容
    success: function (response) {
      const $input = $('#input-sample');
      const newValue = parseInt($input.val()) - 1;
      $input.val(newValue);
      
      // 直接在这里检测值并执行逻辑
      if (newValue <= 0) {
        // 执行后续操作
        console.log('值已减至0，开始执行后续操作');
      }
    }
  });
});

3. 使用MutationObserver监听属性变化（适合多场景修改的情况）

如果你的场景里有多处脚本可能修改这个输入框的值，不想每次都手动触发事件，可以用原生的MutationObserver监听input的value属性变化：

// 获取目标输入框元素
const input = document.getElementById('input-sample');
// 创建观察者实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === 'value') {
      const value = parseInt(input.value);
      if (value <= 0) {
        // 执行后续操作
        console.log('值已减至0，开始执行后续操作');
      }
    }
  });
});
// 配置观察选项：监听属性变化
observer.observe(input, { attributes: true });

// 你的AJAX代码无需改动，依然用.val()更新值即可
$('.btn-select').click(function(e){
  e.preventDefault();
  $.ajax({ 
    // 你的AJAX配置内容
    success: function (response) {
      $('#input-sample').val(parseInt($('#input-sample').val()) - 1);
    }
  });
});

内容的提问来源于stack exchange，提问作者swlok