javascript - 如何通过 on() 从 jquery 事件访问类方法

Question

我正在尝试创建一个“组件”之类的东西，以便有这个 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>

这里是使其工作的随附代码。

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

问题是在任何 ON() 事件中我无法调用类方法。每个方法都是未定义的。如果我直接调用或使用 this.method() 并不重要[我认为在 on() 中 this 指的是控件？]

Answer 1

您的事件处理程序由 on 作为匿名函数调用，this 是事件的 currentTarget。为了防止这种情况，请使用 arrow function 。

An arrow function does not have its own this; the this value of the enclosing execution context (the class instance in this case) is used.

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

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