javascript - jQuery Callback inside Typescript Class - Stack Overflow

admin管理员组

文章数量:1392003

Got a Problem with Typescript and jQuery. The elements get appended to body and show up but nothing happens when i click the button.

I suppose its something with the this.fooClick() that gets passed to the button but doesnt get called or the wrong jquery elements gets saved to the class variables.

Anyone help?

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

Got a Problem with Typescript and jQuery. The elements get appended to body and show up but nothing happens when i click the button.

I suppose its something with the this.fooClick() that gets passed to the button but doesnt get called or the wrong jquery elements gets saved to the class variables.

Anyone help?

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

• javascript
• jquery
• callback
• typescript
• this

Share Improve this question Follow edited Apr 16, 2015 at 7:53 xDreamCoding asked Apr 15, 2015 at 19:25 xDreamCodingxDreamCoding 1,69411 gold badge1212 silver badges1919 bronze badges 1

• 1 .click expects to be passed a function. You are passing the return value of fooClick, which is undefined. JavaScript is not as magical as you might think. Functions to bind event listeners are no different from any other function. Whenever you have foo(bar()), bar will be executed first and its return value will be passed to foo. If you want to tell foo to execute bar at some point, you have to pass bar itself: foo(bar). – Felix Kling Commented Apr 15, 2015 at 19:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

When you call .click() you want to pass it a function that can be executed when the button is clicked. Right now you are immediately executing your function:

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

...which will pass in the result of this.fooClick() which is undefined.

You can solve this, by passing in a function that will be executed later:

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

Note: As shown, make sure you use an arrow function to preserve the context of this.

When registering the click handler, you must pass it a reference to the callback, not invoke the callback. Invocation will happen when the button is actually clicked.

Hence, you should do:

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

Since fooClick expects its this value to be bound to the instance of foo, you should also rewrite it as an arrow function:

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

本文标签： javascriptjQuery Callback inside Typescript ClassStack Overflow