Question

我正在尝试创建一个类，在将事件监听器附加到它时创建一个列表元素。以下是我的代码：

class listItem {

    constructor(id) {
        this.id = id;       
        this.li = $("<li>");
        this.li.text(this.id);

        // Selector
        this.li.on("click", function() {
            this.li.text("clicked");
        });
    }

    getDom() {
        return this.li;
    }
}

我使用以下方法调用此类：

// Creating a new listElement and appending it to the list
var l1 = new listItem(1);
$("ul").append(l1.getDom());

但是，当我点击该元素时，我收到以下错误消息：

未捕获的TypeError：无法读取未定义的属性“text”


在HTMLLIElement。（（指数）：56）

在HTMLLIElement.dispatch（jquery.js：5206）

at HTMLLIElement.elemData.handle（jquery.js：5014）

这是code。

的jsfiddle

Answer 1

问题在于this的上下文。您正在使用this的{{1}}上下文而不是您的班级this.li.on("click", function() {...}。

将listItem值存储到变量中，即：this。

$self

＆＃13;

let $self = this;

＆＃13;

class listItem {

    constructor(id) {
        this.id = id;       
        this.li = $("<li>");
        this.li.text(this.id);
        
        let $self = this;
        
        this.li.on("click", function() {
            $self.li.text("clicked");
        });
    }

    getDom() {
        return this.li;
    }
}


var l1 = new listItem(1);
$("ul").append(l1.getDom());

＆＃13;

请参阅？现在li元素正在改变。

将事件处理程序添加到Constructor方法

1 个答案: