JavaScript修改输入值触发事件及JQuery移除类问题

我来帮你搞定这两个前端问题哈～

当你通过JS代码直接修改输入框的value属性时，浏览器默认不会自动触发input或change事件，这时候得我们手动触发才行。下面分原生JS和jQuery两种场景给你说明：

原生JavaScript实现 #

用dispatchEvent方法手动创建并触发事件：

const input = document.getElementById('your-input-id');
// 先修改输入框值
input.value = '新内容';
// 触发input事件（支持冒泡，父元素也能捕获到）
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
// 如果需要触发change事件（通常输入框失焦时触发，手动触发按需使用）
input.dispatchEvent(new Event('change', { bubbles: true }));

jQuery实现 #

用jQuery的话更省心，直接链式调用.trigger()方法：

$('#your-input-id').val('新内容').trigger('input');
// 或者触发change事件
$('#your-input-id').val('新内容').trigger('change');

你碰到的是事件委托的典型场景——直接给元素绑定事件时，只有绑定那一刻已经存在于DOM里的元素才会生效，动态生成的元素是后来才加入的，自然不会触发之前绑定的事件。

解决办法：换成事件委托 #

把事件绑定到一个**已经存在的父元素（甚至是document）**上，然后指定要监听的目标选择器。这样不管元素是一开始就有的，还是后来动态生成的，只要匹配选择器，事件都会被触发。

修改你的代码如下：

// 原来的写法（仅对已存在的元素生效）
// $(':input').on('input', function () { ... });

// 修改为事件委托（对动态生成的元素也生效）
$(document).on('input', ':input', function () {
  if ($(this).hasClass('example')) {
    $(this).removeClass('example');
  }
});

另外，你那段修改#two值的代码，如果#one也是动态生成的，同样要改成事件委托：

// 绑定到已存在的父元素，比如document，或者更具体的容器
$(document).on('input', '#one', function(){
  $('#two').val($(this).val());
});

为啥事件委托能生效？ #

这是利用了DOM事件的冒泡机制——当子元素触发事件时，事件会向上冒泡到父元素，父元素捕获到事件后，会判断触发事件的元素是否匹配我们指定的选择器，匹配的话就执行回调函数。这样不管子元素啥时候创建的，只要在父元素范围内，就能触发事件。

内容的提问来源于stack exchange，提问作者Juan Salvador Portugal