Javascript 函数只能运行一次

Question

我的页面上有一个内联脚本，如下所示:

<script type="text/javascript">
    var rootPath = '<%= Url.Content("~/") %>';

    $(document).ready(function () {

        $('#logonStatus').click(function () { loadLoginForm(); });
        alert('Document Ready');
    });

    function loadLoginForm() {

        if(!serenity.tools.isStyleSheetLoaded('redmond.css')) {
            $('head').append('<%= Url.StyleTag("Redmond/redmond.css", MediaTypes.Screen) %>');
        }            

        if(!serenity.tools.elementExists($('#logonContainer'))) {
            $.ajax({
                async: false,
                cache: false,
                datatype: 'html',
                success: function (data) { $('body').append(data); },
                type: 'GET',
                url: '/Membership/LogOn'
            });
        }

        $('#logonContainer').dialog({
            modal: true,                
            hide: 'slide'
        });
    }


</script>

我还加载了一个自定义 JavaScript 文件，其内容如下:

var serenity = new function () {

$(document).ready(function () {

    jQuery.ajaxSetup({
        beforeSend: function (xhr) {
            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        }
    });

});

this.tools = new function () {

    this.isStyleSheetLoaded = function (fileName) {

        $(document.styleSheets).each(function () {
            if (this.href.toLowerCase().indexOf(fileName) != -1) {
                this.isStyleSheetLoaded = true;
                return;
            }
        });

        this.isStyleSheetLoaded = false;
    }

    this.elementExists = function (element) {
        this.elementExists = element.length != 0;
    }
}

}

由 ajax 调用加载的文件只是一个带有包含输入元素的表的 div。该文件不包含任何 JavaScript。

我的问题是，第一次调用 isStyleSheetLoaded 时它工作得很好，但是在加载文件并且显示并关闭对话框后，我单击了触发 loadLoginForm 函数的链接，但这次它说 isStyleSheetLoaded 不是函数。这出现在所有浏览器中，所以我 99% 确定这是我的问题，但我不知道它是什么。有人可以指出我正确的方向吗？

提前致谢。

Answer 1

我认为您的问题如下:

您定义了一个函数“this.isStyleSheetLoaded = function (fileName)”，但在他的主体中您覆盖了此属性“this.isStyleSheetLoaded = true;”。

因此，在第一次调用 isStyleSheetLoaded 后，该函数将被 bool 值覆盖。

正确的方法可能是:

    this.isStyleSheetLoaded = function (fileName) {

      $(document.styleSheets).each(function () {
        if (this.href.toLowerCase().indexOf(fileName) != -1) {
            return true;
        }
      });

    return false;
}