jQuery如何编程触发动态添加元素绑定的事件？首次加载触发失败怎么处理

解决方案 #

根据#elem的加载状态选择对应实现方案：

场景1：页面首次加载时#elem已经存在于DOM中 #

直接选中目标元素触发change事件即可：

$('#elem').trigger('change');

场景2：#elem是动态生成的，首次加载时还未插入DOM #

需要等#elem完成渲染插入DOM后，再执行触发逻辑。如果是Ajax请求返回后渲染的元素，就在Ajax的success回调、元素插入DOM的代码之后，执行上面的触发语句。
如果无法确定#elem的插入时机，可以用MutationObserver监听DOM变化，匹配到元素插入后自动触发：

const observer = new MutationObserver((mutations) => {
  if ($('#elem').length) {
    $('#elem').trigger('change');
    observer.disconnect(); // 触发后停止监听
  }
});
observer.observe(document.body, { childList: true, subtree: true });

原有方案失效原因 #

你用的是jQuery的事件委托机制，绑定在body上的回调仅当事件冒泡到body、且事件触发源匹配#elem选择器时才会执行：

• 第一种方案直接触发body的change事件，事件源是body本身，不匹配#elem选择器，回调不会执行
• 第二种方案末尾的.change()等价于$('body').trigger('change')，问题和第一种完全一致，因此也无效

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