jquery - jquery 绑定上下文不匹配

Question

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

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({}));

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

Answer 1

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

你可以打电话xyx.getMainContainerSelector();

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

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

我认为第一个选项更好。