Question

我试图创建一个＆＃34;组件＆＃34;有点像这样的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（）中指的是控件？无效无关。]

Answer 1

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

箭头功能没有自己的功能;这个值使用封闭执行上下文（在本例中为类实例）。

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

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

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

1 个答案: