javascript - AJAX 将 HTML 放入用相同代码创建的 div 中

Question

我的代码有问题，并且已经搜索了几个小时可能的解决方案，但没有运气。我自己尝试了很多事情，也没有运气。所以这是我的问题:

我有一个 JS 函数，它创建一个新的“窗口”，包括所有 DIV，因此所有内容都是动态创建的。我的函数中有一个 AJAX 请求，它从 PHP 文件获取数据，并且应该将该数据放入同一函数创建的相应 DIV 中。但我收到错误:

Uncaught TypeError: Cannot set property 'innerHTML' of undefined

我的代码:

var proWindow = function(HEIGHT,WIDTH,TITLE,TYPE,ID){
this.max = false;
this.name = TITLE;
this.mMain = document.createElement("div");
this.mMain.className = "main";
this.appID = ID;
this.id = this.name + ID;
$.ajax({
    url: 'includes/getAppContents.php',
    type: 'GET',
    data: {thisAppID: this.appID},
})
.done(function(result) {
    var result = $.parseJSON(result);
    var code = (result['code']);
     this.mMain.innerHTML = code;
})
.fail(function() {
    //console.log("FAILED RETRIEVING CODE FOR APPLICATION");
})
.always(function() {
    //console.log("INITIALIZING APPLICATION");
});

代码的“this”部分完全丢失在 AJAX 括号中，这导致了问题，AJAX 不知道我的意思:“this.mMain”，但我应该如何解决这个问题？

谢谢，-特里斯坦

Answer 1

问题是你失去了上下文。输入 done 回调后，this 不再指向您定义元素的外部 this。

您可以通过告诉 jQuery 在外部上下文中调用回调来纠正此问题，通过 bind() (或 jQuery 的 .proxy()):

.done(function(result) {
    var result = $.parseJSON(result);
    var code = (result['code']);
     this.mMain.innerHTML = code;
}.bind(this))