通过innerHTML/jQuery html()插入的元素onclick事件不生效如何解决

问题答复 #

这种情况不属于正常预期现象，正常情况下通过jQuery.html()插入的带内联onclick属性的元素，只要满足触发条件可以正常执行绑定逻辑。你遇到的失效问题大概率是以下两种原因导致：

• 你的buyAnimal函数没有定义在全局作用域：内联onclick绑定的函数必须是window对象下可访问的全局函数，如果你把buyAnimal写在了$(function() {})闭包、其他私有函数内部，内联事件触发时找不到对应的函数就会静默失败。如果静态写法能生效，说明你写静态代码时buyAnimal是全局可访问的，后续调整了函数定义的作用域才会出现动态插入失效的问题。
• 插入代码执行时目标元素不存在：你可以执行console.log($('#element').length)验证是否能正常选中要插入内容的父容器，如果值为0说明代码执行时DOM还没加载完成，插入逻辑根本没有生效。

解决方案 #

不是必须单独绑定点击事件，你可以选择两种方案解决：

1. 继续使用内联onclick写法：把buyAnimal函数挂载到全局作用域即可，示例：

window.buyAnimal = function(id) {
  // 原有函数逻辑不变
}

2. 更推荐使用事件委托绑定（无全局污染、可维护性更高）：不需要写内联onclick，直接给父容器绑定委托事件即可适配所有动态插入的子元素，示例：

// 可以给动态插入的div加自定义类比如.buy-btn，替换选择器更精准
$('#element').on('click', 'div', function() {
  buyAnimal(0);
})
// 如果需要给不同div传不同的id，可以给div加data-id属性取值

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