Question

使用Typescript和jQuery时出现问题。元素会附加到正文并显示，但单击按钮时没有任何反应。

我想它的this.fooClick（）会传递给按钮，但不会被调用或错误的jquery元素被保存到类变量中。

有人帮忙吗？

test.ts

/// <reference path="jquery.d.ts" />

class foo {

    private button;
    private text;

    constructor() {

        this.button = $('<button>').html("click").click(this.fooClick());
        this.text = $('<p>').html("foo");

        $('body').append(this.button);
        $('body').append(this.text);
    }

    public fooClick() {
        $(this.text).html("bar");
    }

}

$(function() {
    var foobar = new foo();
})

test.js

/// <reference path="jquery.d.ts" />
var foo = (function () {
    function foo() {
        this.button = $('<button>').html("click").click(this.fooClick());
        this.text = $('<p>').html("foo");
        $('body').append(this.button);
        $('body').append(this.text);
    }
    foo.prototype.fooClick = function () {
        $(this.text).html("bar");
    };
    return foo;
})();
$(function () {
    var bar = new foo();
});

Answer 1

当您致电.click()时，您想要传递一个可在单击按钮时执行的功能。现在你正在立即执行你的功能：

this.button = $('<button>').html("click").click(this.fooClick());

...将传递this.fooClick() undefined的结果。

您可以通过传入稍后将执行的函数来解决此问题：

this.button = $('<button>').html("click").click(() => this.fooClick());

注意：如图所示，请确保使用箭头功能来保留this的上下文。

Answer 2

注册点击处理程序时，必须向其传递对回调的引用，不调用回调。实际点击按钮时会发生调用。

因此，您应该这样做：

this.button = $('<button>').html("click").click(this.fooClick);
// notice the removed parentheses

由于fooClick期望其this值绑定到foo的实例，因此您还应将其重写为箭头函数：

public fooClick = () => {
    $(this.text).html("bar");
}

在Typescript类中的jQuery回调

2 个答案: