如何使用jQuery为动态创建的表格单元格绑定交互事件？

问题原因 #

1. 动态生成元素无法直接绑定事件：你直接用$("#our_table th")绑定事件时，动态生成的<th>还不存在，所以事件根本没有绑定到对应的元素上。
2. 事件委托方法误用：.mousedown()、.mouseover()这类快捷事件方法不支持传入子选择器做事件委托，只有.on()方法支持委托语法。
3. 事件绑定写法错误：你写的.on('bind', "selectstart", function () {})完全不符合语法，bind是jQuery的旧事件绑定方法，不是事件名称。

正确写法 #

你需要把所有事件委托给页面初始就存在的父元素#our_table，写法如下：

let isMouseDown = false;
// 确保DOM加载完成后执行代码
$(function () {
  $("#our_table")
    .on('mousedown', 'th', function () {
      document.getElementById("demo").innerHTML = "Hello JavaScript!";
      isMouseDown = true;
      $(this).toggleClass("highlighted");
      return false;
    })
    .on('mouseover', 'th', function () {
      if (isMouseDown) {
        $(this).toggleClass("highlighted");
      }
    })
    .on('selectstart', 'th', function () {
      return false;
    });
})

注意事项 #

• 事件委托的语法是$(父元素).on(事件名, 子元素选择器, 回调函数)，父元素必须是页面加载完成时就已经存在的元素，不能是动态生成的。
• 不要混淆标签选择器和类选择器：选<th>标签直接写th即可，加了.的.th是选择class属性为th的元素。

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