我有这样的 TS 代码:

class MicrositeRequest {
    micrositeName: string;
    micrositeTemplate: string;

    constructor() {
        this.micrositeName = $("#micrositeNameId").val();
        this.micrositeTemplate = $("#templateId option:selected").text();
    }

  public  IsMicrositeRequestValid() {
        if (this.checkForName() && this.checkForTemplate()) {
            return true;
        }
        else {
            return false;
        }
    }

    checkForName() {
        if (this.micrositeName != null && this.micrositeName.length != 0) {
            return true;
        }
        else {
            return false;
        }
    }

    checkForTemplate() {
        if (this.micrositeTemplate != null && this.micrositeTemplate.length != 0) {
            return true;
        }
        else {
            return false;
        }
    }
}

这是转换后的 JS:

/// <reference path="scripts/typings/jquery/jquery.d.ts" />
var MicrositeRequest = (function () {
    function MicrositeRequest() {
        this.micrositeName = $("#micrositeNameId").val();
        this.micrositeTemplate = $("#templateId option:selected").text();
    }
    MicrositeRequest.prototype.IsMicrositeRequestValid = function () {
        if (this.checkForName() && this.checkForTemplate()) {
            return true;
        }
        else {
            return false;
        }
    };
    MicrositeRequest.prototype.checkForName = function () {
        if (this.micrositeName != null && this.micrositeName.length != 0) {
            return true;
        }
        else {
            return false;
        }
    };
    MicrositeRequest.prototype.checkForTemplate = function () {
        if (this.micrositeTemplate != null && this.micrositeTemplate.length != 0) {
            return true;
        }
        else {
            return false;
        }
    };
    return MicrositeRequest;
})();

//# sourceMappingURL=Microsite.js.map

单击按钮时，我想调用 IsMicrositeRequestValid() 方法。

这是 HTML:

<div>
            <input type="submit" name="submit" value="Get" onclick="IsMicrositeRequestValid()" />
        </div>

控制台显示 IsMicrositeRequestValid 未定义。

有任何线索说明为什么会发生这种情况以及我该如何解决它吗？

最佳答案

onclick 属性中对 IsMicrositeRequestValid 的调用要求该函数是全局命名空间 (window) 的一部分。此外，我很确定您需要在调用 IsMicrositeRequestValid 之前实例化 MicrositeRequest 对象(因为它依赖于 this)。

function validateRequest() { // declare a function in the global namespace
    var mr = new MicrositeRequest();
    return mr.IsMicrositeRequestValid();
}

<input type="submit" name="sumbit" value="Get" onclick="validateRequest()" />

是应该让它工作的快速而肮脏的方式。

你也可以这样做:

window.validateRequest = function () { // declare a function in the global namespace
    var mr = new MicrositeRequest();
    return mr.IsMicrositeRequestValid();
}

我认为它更具可读性。

另外，查看 Element.addEventListener 方法。它提供了更大的灵 active 。

var submit = document.getElementById('my-submit');
submit.addEventListener('click', function () {
    var mr = new MicrositeRequest();
    return mr.IsMicrositeRequestValid();    
});

<input type="submit" id="my-submit" name="sumbit" value="Get" />

关于javascript - 使用 TypeScript 在 OnClick 上调用方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26930592/