jquery 绑定上下文不匹配答案

【问题标题】：jquery bind context mismatchjquery 绑定上下文不匹配
【发布时间】：2013-03-27 01:41:44
【问题描述】：

我有一个 HTML 菜单选项，我在 jQuery 中绑定了一个 click 处理程序：

var xyz = {
    getMainContainerSelector: function () {
        return '.container#main';
    },
    bindMenuOptions: function () {
        $('#menu_outcome_list').bind('click', function() {
            // inject template
            $(this.getMainContainerSelector()).html(ich.outcomeListTemplate({}));
            // load datatable
            $('#outcomes').dataTable({
                "bServerSide": true,
                'sPaginationType': 'bootstrap',
                "sAjaxSource": '../php/client/json.php?type=outcomes'
            });
        });
    },
    ...
}

下面这行有问题：

$(this.getMainContainerSelector()).html(ich.outcomeListTemplate({}));

我猜这是一个上下文问题。我的意思是，在绑定函数内部，this 不再是xyz，而是 ('#menu_outcome_list') HTML 元素。我想做的只是从绑定函数内部调用xyz的方法。

【问题讨论】：

xyz.getMainContainerSelector() 不起作用吗？
旁注，使用.container#main没有多大意义，直接使用#main
@KevinB，好吧，你是对的 ;)

标签： jquery binding jquery-context

【解决方案1】：

您仍然可以在 xyz 中定义的方法中对它进行闭包访问。

您可以拨打xyx.getMainContainerSelector();

如果你想要一个jQueryish 解决方案，jQuery 有一个jQuery.proxy() 函数来绑定上下文：

$('#menu_outcome_list').bind('click', $.proxy(function(){
    //rest of your code
},xyz)})

我认为第一个选项更好。

【讨论】：

仅当 xyz 变量值在两者之间没有变化时。为了安全起见，OP 可以在bindMenuOptions 中声明一个变量var _this=this。无论如何 +1。
@Benjamin - 所以如果我使用这个代理，this 将与xyz 相同，对吧？您能否解释一下为什么您认为xyz.get... 更好？
顺便问一下，我可以做$('#menu_outcome_list').bind('click', $.proxy(function(){...},this) - 还是我会得到同样的错误？
关于代理的事情，是的。答案中的 jQuery API 链接中有很多示例。至于更好的选择，在这种情况下使用关键字“this”可能会造成混淆。在 JavaScript 中这是动态绑定的，可以手动设置（例如调用或应用）。您确切地知道 xyz 是什么，它就是您正在使用的对象。没有歧义，这意味着更少的混淆空间，也没有额外的函数调用，并且对 jQuery 的依赖更少。顺便说一句，$.proxy 方法在 JavaScript 中有更好的版本（但在旧 IE 中不起作用），mzl.la/RzcBaJ
有一个错字：应该是},xyz)) 而不是},xyz)