Question

       var U = function(){
            this.div = document.createElement('DIV');
            this.div.id= 'oooofffff';
            this.div.innerHTML = '<form action=""><input type="file" name="trainingReport"  /><input type="submit" value="Upload" id="Upload" /></form>';
            document.body.appendChild(this.div);
            $(this.div).css({'text-align':'center','padding-top':'25px'});
            $('input#Upload',this.div).button();
            $(this.div).dialog({
                    title:'Upload Summer Training Report',
                    resizable:false,
                    position:['center',300],
                    show:'blind',
                    hide:'explode',
                    autoOpen:false
                });
        }
        U.uploadReport = function(ApplicationID){
            console.log(this.div); //outputs undefined
            $(this.div).dialog("open");
        }
        $(document).ready(U);

我的对象出了什么问题？当我调用U.uploadReport()函数时，它看不到this.div个对象。我该怎么做才能解决它？

注意：请不要提供我可以使用$('#oooofffff').dialog('open')

修改：版本2：

var U = function(){
            var that = this;
            that.div = document.createElement('DIV');
            that.div.id= 'oooofffff';
            that.div.innerHTML = '<form action=""><input type="file" name="trainingReport"  /><input type="submit" value="Upload" id="Upload" /></form>';
            $(document).ready(function(){U.initialize()});


            that.uploadReport = function(ApplicationID){
                console.log(that.div);
                $(that.div).dialog("open");
            }
            that.initialize = function(){
                document.body.appendChild(that.div);
                $(that.div).css({'text-align':'center','padding-top':'25px'});
                $('input#Upload',that.div).button();
                $(that.div).dialog({
                    title:'Upload Summer Training Report',
                    resizable:false,
                    position:['center',300],
                    show:'blind',
                    hide:'explode',
                    autoOpen:false
                });
            }
            return that;
        }();

Answer 1

你的班级声明是错误的。应该（可能）是这样的：

function UType() {
  // Your class code
}

UType.prototype.uploadReport = function()
{
  // Your method code
}

// New instance, assign it to U.
var U = new UType();

// Call method directly
U.uploadReport();

// Call inside wrapper function, to pass it to JQuery
$(function(){ U.uploadReport(); });

Answer 2

您的对象创建不当且uploadReport中的this.div不在正确的范围内。

尝试将其更改为：

var U = function(){
    var that = {};
    that.div = document.createElement('DIV');
    that.div.id= 'oooofffff';
    that.div.innerHTML = '<form action=""><input type="file" name="trainingReport"  /><input type="submit" value="Upload" id="Upload" /></form>';
    document.body.appendChild(that.div);
    $(that.div).css({'text-align':'center','padding-top':'25px'});
    $('input#Upload',that.div).button();
    $(that.div).dialog({
        title:'Upload Summer Training Report',
        resizable:false,
        position:['center',300],
        show:'blind',
        hide:'explode',
        autoOpen:false
    });

    that.uploadReport = function(ApplicationID){
        console.log(that.div);
        $(that.div).dialog("open");
    }
    return that;
}();
$(document).ready(U);

请注意，它会返回自身以提供对象，而函数后面会有（），因此会立即执行。所以你实际上成了我认为你想要的功能的结果？

面向对象的javascript bug

2 个答案: