0

在大家的帮助下,我得到了它的工作。我将“上下文:”从“this.parentNode”更改为“this”。我仍然对“this”上下文感到困惑。通过有限的测试,它似乎解决了我运行多个实例的问题。谢谢你的帮助。新代码如下所示。

我是 jQuery 和 Javascript 的新手。我正在创建一个通用对象来导航数据库表 (NavDb)。如果我创建 1 个实例,它会完美运行。当我运行多个实例时,它失败了。我将问题追溯到我如何使用“this”。一个初始化/处理 ajax 请求的例程失败。一个表单可以有任意数量的选择器(自动完成或下拉菜单)。该例程递归地执行 ajax 请求,直到所有选择器都已初始化。'this' 变量在进入 'success:' 函数时引用 ajax 对象。我需要一个对父对象的引用,所以我在第 2 行创建了一个 $this。问题是它创建了一个闭包并弄乱了第二个实例(我相信这就是正在发生的事情)。如何在成功函数中获取对父对象的引用?我可以将 ajax 请求绑定到父对象吗?我需要这样的东西:

var $this = this.parent;

希望我清楚地解释了这一点。

新代码

NavDb.prototype.getSelData = function () {
    if (this.curSelector >= this.selectors.length) {
        return;
    }
    else {
        var sql = this.selectors[this.curSelector].sql;
        $.ajax({
            url: 'php/select.php',
            type: 'POST',
            context: this,    // Only needed 'this' not this.parentNode.
            dataType: 'json',
            data: {
                'sql': sql
            }
        }).done(function (data) {
            if (data.success) {
                if (data.v.length > 0) {
                    this.selectors[this.curSelector].data = data;
                    if (this.selectors[this.curSelector].type == "autoComp") {
                        this.initAC();
                    };
                    if (this.selectors[this.curSelector].type == "dropDown") {
                        this.initDD();
                    };
                }
            }
            this.curSelector++;
            this.getSelData();
        }).fail(function (XHR, textStatus, errorThrown) {
            $("#status").html(getErrorText(XHR.responseText));
        });
    };
};

旧代码

   NavDb.prototype.ajaxSelData = function () {
        var $this = this;
        if (this.curSelector >= this.selectors.length) {
            $this = null;
            return;
        }
        else {
            var sql = $this.selectors[$this.curSelector].sql;
            $.ajax({
                url: 'php/select.php',
                type: 'POST',
                dataType: 'json',
                data: {
                    'sql': sql
                },
                success: function (data) {
                    if (data.success) {
                        if (data.v.length > 0) {
                            $this.selectors[$this.curSelector].data = data;
                            if ($this.selectors[$this.curSelector].type == "autoComp") {
                                $this.initAC();
                            };
                            if ($this.selectors[$this.curSelector].type == "dropDown") {
                                $this.initDD();
                            };
                        }
                    } else {
                        alert(data.error);
                    }
                    $this.curSelector++;
                    $this.ajaxSelData();
                }
            });
        };
    };
4

2 回答 2

0

有关正确的上下文范围,请参阅此答案

您可以通过多种方式确保正确的上下文:

  • 使用上下文

    $.ajax({
         url: 'php/select.php',
         type: 'POST',
         context: this.parentNode,
         dataType: 'json',
         data: {
             sql: sql
         },
         success: function (data) {
             // 'this' is parentNode
         }
    })
    
  • 使用闭包

    var parentNode = this.parentNode;
    success: function (data) {
        //you can now use 'parentNode'
    }
    
  • 使用$.proxy

    $.proxy(function(data){
        // 'this' is parentNode
    }, this.parentNode);
    
于 2013-11-08T22:11:04.293 回答
0

您的代码创建的闭包对于每个实例都是唯一的(它为每个实例创建一个单独的闭包),因此您认为闭包弄乱了第二个实例的理论是不正确的。

因此,像您一样创建单独的变量:

var $this = this;

是一件非常好的事情,不会引起问题。


但是,如果你想要父节点,那么也许你应该这样做:

var parent = this.parent;    

然后引用parentajax 函数中的变量。


您也可以只将context参数传递给您的 ajax 调用,这将this在成功处理程序回调中根据需要设置参数。

       $.ajax({
            url: 'php/select.php',
            type: 'POST',
            dataType: 'json',
            context: this.parent,        // add this line
            data: {
                'sql': sql
            },
           success: function (data) {
                // now the this pointer is set as desired in your callback here
                if (data.success) {
于 2013-11-08T21:31:14.007 回答