动态修改input值时如何触发绑定的change事件监听器？

核心问题有两个：

1. jQuery的.val()方法修改表单值时，默认不会自动触发change事件，必须手动触发
2. 你之前的trigger()用法存在两个错误：触发事件的目标元素不对、传参格式不符合API要求

具体实现步骤 #

1. 先正确绑定动态元素的change事件委托 #

因为.bulk_number是动态插入的元素，直接给元素绑事件会失效，需要把事件绑定到已存在的父容器.all_bulk_inputs上，做事件委托：

// 页面初始化时就可以绑定，后续动态新增的.bulk_number也会生效
$('.all_bulk_inputs').on('change', '.bulk_number', function() {
  console.log('bulk number changed，当前输入值为：', $(this).val())
  // 这里写值变化后要执行的业务逻辑即可
})

2. 设值后触发对应input的change事件 #

你不需要在trigger()里传选择器和回调函数——回调逻辑已经在上面绑定事件时定义好了，只要在给input赋值后，直接选中目标input元素触发它自身的change事件即可：

$('#add_rand').on('click', function(){
  // 这里替换成你自己的随机数生成逻辑
  const randomNumber = Math.floor(Math.random() * 1000)
  // 赋值后链式调用trigger触发change事件
  $('.bulk_number').val(randomNumber).trigger('change')
})

完整可运行示例代码 #

<div class="all_bulk_inputs">
  <input class="bulk_number" name="rand_number" />
  <!-- 后续动态新增的.bulk_number输入框也会自动适配逻辑 -->
</div>

<button id="add_rand">Add Random Number</button>

<script>
// 绑定委托事件
$('.all_bulk_inputs').on('change', '.bulk_number', function(){
  console.log('bulk number changed，当前值：', $(this).val());
})

// 按钮点击赋值+触发事件
$('#add_rand').on('click', function(){
  const randomVal = Math.floor(Math.random() * 1000);
  $('.bulk_number').val(randomVal).trigger('change');
})
</script>

补充说明：如果你后续动态新增了多个.bulk_number输入框，这套逻辑完全兼容，只要给对应input设值后触发自身的change事件即可，不需要重复绑定监听。

内容的提问来源于stack exchange，提问作者Ebrahim Khalil Amid