Javascript 如何通过on（）从jquery事件访问类方法

我正在尝试创建一个“组件”类型的东西，这样就有了HTML5代码和附带的javascript代码，这样我就可以随心所欲地使用它。因此，首先看一看Html5组件代码

<div class="listEditor" id="myStringList">
<div id="list" >
    <ul class="list-unstyled">
    </ul>
</div>
<div id="editor">
    <form class="form-inline">
        <div class="row">
            <div class="col-xs-10  pull-left">
                <input type="text" id="sentenceText" class="form-control input-sm" />
            </div>
            <div class="col-xs-2 ">
                <button type="button" class="btn btn-primary btn-sm" title="Add to list">@Html.GlyphIcon("plus")</button>
            </div>
        </div>
    </form>
  </div>
</div>

@GlyphIcon（“plus”）

下面是使其工作的附带代码

class listEditor {
constructor(id) {
    this.componentSelector = 'div#' + id;
    this.component = $(this.componentSelector);
    this.listSelector = this.componentSelector + " div#list ul";

    $(this.componentSelector + " div#list ul li a").on("click", function (evt) {
        evt.preventDefault();
        $(this).parent().remove();
        return false;
    });

    $(this.componentSelector + " div#editor button").on("click", function (evt) {
        var txt = $(this).parent().parent().find("input:text").val();
        addItem(txt);
    });

}

clear() {
    $(this.listSelector).empty();
}

addItem(text) {
    var item = '<li><a href="#" title="click to remove"><span class="glyphicon glyphicon-remove"></span></a><text>' + text + '</text></li>';
    $(this.listSelector).append(item);
}
removeListItem(evt) {
     evt.preventDefault();
    $(this).parent().remove();
    return false;
 }

getData() {
    var data = [];

    this.component.children("div#list ul li").each(function (idx, li) {
        var txt = $(this).children("text").first().text();
        data.push(txt);
    });

    return JSON.stringify(data);
  }
}

类listEditor{
建造师（id）{
this.componentSelector='div#'+id；
this.component=$（this.componentSelector）；
this.listSelector=this.componentSelector+“div#list ul”；
$（this.componentSelector+“div#list ul li a”）。打开（“单击”，函数（evt）{
evt.preventDefault（）；
$（this.parent（）.remove（）；
返回false；
});
$（this.componentSelector+“div#编辑器按钮”）。打开（“单击”，函数（evt）{
var txt=$（this.parent（）.parent（）.find（“输入：文本”）.val（）；
附加项（txt）；
});
}
清除（）{
$（this.listSelector）.empty（）；
}
附加项（文本）{
变量项=“
”+文本+”
”；
$（this.listSelector）.append（项）；
}
移除列表项（evt）{
evt.preventDefault（）；
$（this.parent（）.remove（）；
返回false；
}
getData（）{
var数据=[]；
this.component.children（“div#list ul li”）。每个（函数（idx，li）{
var txt=$（this.children（“text”）.first（）.text（）；
数据推送（txt）；
});
返回JSON.stringify（数据）；
}
}

---

问题是，在任何ON（）事件中，我都不能调用类方法。每个方法都是未定义的。无论我是直接调用还是使用此.method（）[我认为在on（）中这指的是控件？]

您的事件处理程序被

on

作为匿名函数调用，并且

此

是事件的

当前目标。要防止出现这种情况，请使用

箭头函数没有它自己的函数；这个值是
使用封闭的执行上下文（本例中的类实例）

但是，现在您必须手动获取对单击事件的引用-
$（evt.currentTarget）
：

事件处理程序被

上的

作为匿名函数调用，
此
是事件的
当前目标
。要防止出现这种情况，请使用

箭头函数没有它自己的函数；这个值是
使用封闭的执行上下文（本例中的类实例）

但是，现在您必须手动获取对单击事件的引用-
$（evt.currentTarget）
：

您正在（）上的
函数的作用域内调用类方法。我要做的是将
this
的类实例保存在另一个变量中，以便您可以在
on（）
函数中访问它。例如
classThis=this
。然后在
on（）
内部调用方法：
classThis.addItem（）
作为jQuery插件更简单我是jQuery的新手，所以我不能做插件之类的事情实际上没有你当前的方法复杂你在
on（）
函数范围内调用类方法。我要做的是将
this
的类实例保存在另一个变量中，以便您可以在
on（）
函数中访问它。例如
classThis=this
。然后在
on（）
中，调用方法：
classThis.addItem（）
作为jQuery插件更简单我是jQuery的新手，所以我不能做插件之类的事情，实际上没有你当前的方法复杂，但现在alink单击不起作用。它甚至没有触发删除链接？删除链接将不起作用，因为您正在动态添加列表元素，并且在实例化类时绑定了一次事件。使用事件委派-
$（this.componentSelector+“div#list ul”）。在（“click”，“a”，“evt）=>{/../}）上哦，你是一个大师，是的，它像一个符咒一样工作……虽然我在使用标准形式时根本不理解其中的区别，但事件是绑定到现有元素的。当您使用事件委派时，事件被绑定到父级，但它只对单击某个元素作出反应。通过这种方式，您可以添加/删除元素，而无需担心事件处理。阅读中的事件委派。但现在alink单击不起作用。它甚至没有触发删除链接？删除链接将不起作用，因为您正在动态添加列表元素，并且在实例化类时绑定了一次事件。使用事件委派-
$（this.componentSelector+“div#list ul”）。在（“click”，“a”，“evt）=>{/../}）上哦，你是一个大师，是的，它像一个符咒一样工作……虽然我在使用标准形式时根本不理解其中的区别，但事件是绑定到现有元素的。当您使用事件委派时，事件被绑定到父级，但它只对单击某个元素作出反应。通过这种方式，您可以添加/删除元素，而无需担心事件处理。阅读中的事件委派。
$(this.componentSelector + " div#editor button").on("click", (evt) => {
  var txt = $(evt.currentTarget).parent().parent().find("input:text").val();
  addItem(txt);
});