Javascript 向构造函数方法添加事件处理程序

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

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;
    }
}

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

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

至少有一个元素。（（索引）：56）

在htmlilement.dispatch（jquery.js:5206）

位于htmlilement.elemData.handle（jquery.js:5014）

---

这是我的jsfiddle。

问题在于

这个
的上下文。您使用的是
this
的
this.li.on（“click”，function（）{…}
上下文，而不是类的
listItem

将
此
值存储到变量中，即：
$self

let $self = this;


类列表项{
建造师（id）{
this.id=id；
this.li=$（“
”）；
this.li.text（this.id）；
让$self=this；
this.li.on（“单击”，函数（）{
$self.li.text（“单击”）；
});
}
getDom（）{
把这个还给李先生；
}
}
var l1=新的列表项（1）；
$（“ul”）.append（l1.getDom（））；


问题在于
此
的上下文。您正在使用
此
的
此.li.on的
上下文（“click”，function（）{…}
，而不是您的类
列表项的

将
此
值存储到变量中，即：
$self

let $self = this;


类列表项{
建造师（id）{
this.id=id；
this.li=$（“
”）；
this.li.text（this.id）；
让$self=this；
this.li.on（“单击”，函数（）{
$self.li.text（“单击”）；
});
}
getDom（）{
把这个还给李先生；
}
}
var l1=新的列表项（1）；
$（“ul”）.append（l1.getDom（））；


确实有用！快速提问，您使用“let”有什么特别的原因吗？我对这个术语有点不熟悉。它是变量范围的关键字，您可以使用
var
，因为变量的范围是局部的。请阅读该链接了解更多信息。在jQuery中，我认为它应该是
$（“li”）
而不是
$（“
”）
？这确实有帮助！快速提问，您使用“let”有什么特别的原因吗？我对这个术语有点不熟悉。它是变量作用域的关键字，您可以使用
var
，因为变量的作用域是局部的。请阅读该链接了解更多信息。在jQuery中，我认为它应该是
$（“li”）
而不是
$（“
”）
？