时间戳

首页 > 解决方案 > javascript类对象中的点击事件后如何访问元素数据属性

javascript - javascript类对象中的点击事件后如何访问元素数据属性

问题描述

我在 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
}

}

按钮 .do-edit 具有这样的数据属性集data-item_id="531"。

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

如何访问元素属性并仍然可以访问该类？

标签： javascript

解决方案

我发现了一些有用的东西。不知道这是否是“最好的方法”，但它有效。

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

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

}

推荐阅读