如何在javascript类对象内点击事件后访问元素数据属性

Question

我在javascript中有一个类，它有一个bindEvents((方法来捕获点击事件。每个事件都会触发对同一类的新方法的调用。

我需要一些帮助来理解bind和this效应。

class StdList {
constructor(config){
this.config = config;
this.api = 'api/v1/endpoint';
this.bindEvents();
}
bindEvents() {
this.config.container.on('click', '.do-edit', this.onEditClicked.bind(this) );
}
onEditClicked(e){
var self = this;
if (e)
e.preventDefault();
let row = $(this).data('item_id');
console.log("onEditClicked row ID:", row); // onEditClicked row ID: undefined 
console.log("Print API: ", self.api); // This works, and print api/v1/endpoint
}

}

按钮.doedit有一个类似于data-item_id="531"的数据属性集。

如果我不使用bind(this)，我可以使用$(this(.data(..(轻松访问触发事件的按钮的属性，但我不能使用该类的其他属性或方法。为了使用其他类方法和属性，我使用了.bind(this(…现在我可以访问该类，但不能访问按钮的属性。

如何在访问元素属性的同时仍然可以访问类？

Answer 1

我发现了一些有效的东西。不知道是不是"；最佳方式"；但它是有效的。

我只是在onEditClicked方法中使用了event.target函数。

onEditClicked(e){
let row = $(e.target).data('item_id');
console.log("onEditClicked row ID:", row); // It works. onEditClicked row ID: 531 
console.log("Print API: ", this.api); // This works, and print api/v1/endpoint

}