如何在onclick事件中调用类方法？附代码场景技术问询

不过要注意一个关键问题：事件处理函数里的this指向——默认情况下，jQuery点击事件里的this是触发事件的DOM元素（也就是你的.removeRow按钮），而不是你的类实例，直接调用this.removeRow()会报错。下面给你几种靠谱的解决方式，还有针对你动态生成按钮的特殊处理：

先假设你的类结构大概是这样（方便对照） #

class RowManager {
  constructor() {
    // 可以在这里初始化类的属性，比如存储行数据
    this.rowData = [];
  }

  init() {
    // 你的原有绑定逻辑
    $("#editRow").click(function() { /* ... */ });
    $(".removeRow").click(function() { /* 这里要调用类的removeRow */ });
  }

  // 你的类方法：移除行
  removeRow(buttonElement) {
    // 示例逻辑：移除按钮所在的行
    $(buttonElement).closest('tr').remove();
    // 同时更新类里的行数据（如果需要）
    this.rowData = this.rowData.filter(item => item.id !== $(buttonElement).data('row-id'));
  }
}

方式1：用箭头函数绑定上下文（推荐） #

箭头函数会自动继承外部作用域的this，也就是你的类实例。这样在事件处理函数里直接用this就能调用类方法：

init() {
  $("#editRow").click(() => {
    // 这里的this是RowManager实例，可以调用其他类方法
    this.editRow();
  });

  // 处理.removeRow点击
  $(".removeRow").click((e) => {
    // e.target就是点击的按钮元素，传给removeRow方法
    this.removeRow(e.target);
  });
}

方式2：保存类实例的引用（兼容旧浏览器） #

如果你的项目需要兼容不支持箭头函数的旧环境，可以先把类实例的this存到一个变量里（比如that或self）：

init() {
  const that = this; // 保存类实例的引用
  $("#editRow").click(function() {
    that.editRow();
  });

  $(".removeRow").click(function() {
    // 这里的this是点击的按钮元素，传给that.removeRow
    that.removeRow(this);
  });
}

方式3：用jQuery的.bind()绑定上下文 #

也可以用bind()方法把事件处理函数的this强制绑定为类实例：

init() {
  $("#editRow").click(function() {
    this.editRow();
  }.bind(this)); // 绑定类实例为this

  $(".removeRow").click(function() {
    this.removeRow(this); // 注意：第一个this是类实例，第二个this是按钮元素，容易混淆，更推荐用e.target
  }.bind(this));
}

重要提醒：针对你动态生成的按钮 #

看你的代码，按钮是通过var d = '<a href="javascript:void(0)" class="btn btn-xs btn-danger delete-new-row removeRow">...</a>'动态生成的——这种情况下，直接用$(".removeRow").click()绑定事件会失效，因为绑定的时候元素还没被添加到DOM里。这时候要用事件委托，把事件绑定到已经存在的父元素上：

init() {
  // 假设你的按钮都在id为myTable的表格里，绑定到表格上
  $("#myTable").on('click', '.removeRow', (e) => {
    this.removeRow(e.target);
  });
}

这样不管后面动态添加多少个.removeRow按钮，点击都会触发类的removeRow方法。

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