为何静态元素的jQuery点击事件正常，动态生成元素的事件失效？

这是前端开发里超常见的小坑，咱们一步步捋清楚为啥会这样：

第一段代码里的黄色enter单元格是页面加载完成时就已经存在的DOM元素，所以你写的$('.newdiv>td').click(...)能顺利找到这个元素，把点击事件绑定上去，功能自然正常工作。

但第二段的黄色单元格是通过myfunction()动态添加到页面的——当页面刚加载完、你执行那行绑定事件的代码时，这个.newdiv>td元素根本还没被创建出来！jQuery没法给一个不存在的元素绑定事件，所以你点击动态生成的黄色框时，自然没有任何反应。

两种靠谱的解决办法： #

• 事件委托（更推荐）：利用事件冒泡的特性，把事件绑定到一个已经存在的父元素（比如document，或者更靠近的父容器#show）上，让它来监听子元素的点击事件。把原来的点击事件绑定代码改成这样：

$(document).on('click', '.newdiv>td', function(){
  var range = document.createRange();
  range.selectNodeContents(this);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  insertAtCaret('result', sel);
  return false;
});

不管元素是页面初始化就有的，还是后来动态生成的，只要匹配.newdiv>td选择器，点击时都会触发事件，而且不用管元素什么时候被创建。

• 动态生成后再绑定事件：在myfunction()里，把HTML插入到页面之后，再执行绑定事件的代码：

function myfunction(){
  document.getElementById('show').innerHTML = ` <table><tbody><tr class="newdiv"><td style="background:yellow">enter</td></tr></tbody></table> click the yellow box! `;
  // 元素生成后再绑定点击事件
  $('.newdiv>td').click(function(){
    var range = document.createRange();
    range.selectNodeContents(this);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    insertAtCaret('result', sel);
    return false;
  });
}

这种方法适合只在特定场景下生成元素的情况，但要注意：如果多次调用myfunction()，会重复绑定事件，导致点击一次触发多次执行。如果要这么用，可以先解绑再绑定，比如$('.newdiv>td').off('click').click(...)。

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