Javascript怪异-I'；我不知所措

我正在研究这个菜单系统，它与操作系统的工作原理非常相似。 使用jquery等

我在For循环中有2条注释。它基本上是输出$（文档）中的最后一个索引。。。功能。但在文件之外，它可以正常工作

这可能只是一个明显的问题，但我花了大约一个小时来解决这个问题。。提前谢谢

    menu: function(title) {
        this.title = title;
        this.slug = slugify(title);
        this.icon = false;
        this.buttons = Object();
        this.num_buttons = 0;
        this.visible = false;
        this.timeout_id = null;
        this.is_hovering_dropdown = false;
        this.is_hovering_menu = false;


        this.render = function() {
            var that = this;
            var slug = that.slug;
            var str = '<li id="menu-' +slug +'"><a href="#" id="menu-toggle-' +slug + '">' + this.title + '</a>';

            if (this.num_buttons > 0) {
                str += '<ul id="menu-dropdown-' + slug + '" style="display: none;" class="dropdown">';
                for (var button in this.buttons) {

                    str += '<li><a href="#" id="menu-dropdown-' + slug + '-' +that.buttons[button]['slug'] +'">' +that.buttons[button]['title'] +'</a></li>'

                    alert(button) //new project, open project, save as etc.
                    $(document).on("click", "#menu-dropdown-" +slug + '-' + that.buttons[button]['slug'], function() {
                        $("#menu-dropdown-" + slug).hide("fade", 200);
                        that.visible = false;

                        alert(button);//save as, save as, save as, save as etc.
                    });
                }
            }
        }
    }

菜单：功能（标题）{
this.title=标题；
this.slug=slugify（标题）；
this.icon=false；
this.buttons=Object（）；
this.num_按钮=0；
可见=假；
this.timeout_id=null；
this.is\u hovering\u dropdown=false；
this.is\u hovering\u menu=false；
this.render=函数（）{
var=这个；
var slug=该.slug；
var str='
；
如果（this.num_按钮>0）{
str+='
；
for（此.buttons中的var按钮）{
str+='
'
警报（按钮）//新建项目、打开项目、另存为等。
$（document）.on（“click”、“#菜单下拉菜单-“+slug+”-“+that.button[button]['slug]”，function（）{
$（“#菜单下拉菜单-”+slug）.hide（“淡入淡出”，200）；
可见=假；
警报（按钮）；//另存为、另存为、另存为、另存为等。
});
}
}
}
}

给你：

由于操作顺序和作用域，保存所有按钮时都会引用

按钮的最后一个值

您要做的是将该赋值放在一个立即调用的函数中，并将按钮传递到该特定的函数范围中

（功能（按钮）{$（文档）//……}（按钮））

即时函数内部的所有内容都应该仍然可以访问即时函数范围之外的静态内容（即：
that
），和它还将引用
按钮
的当前值

这个故事的较长版本是，在创建按钮时，按钮被赋予了对
按钮
的引用，而不是
按钮
的值，因此，当它们在以后实际调用时，它们会引用按钮当前存在的值（即：在循环中分配的最后一个值）。
是否有html的片段？是否在调用menu.render之前等待加载DOM？在javascript中使用ew html concat。您应该使用JsRender之类的模板引擎并保持理智！此外，您是否在传递给
的函数中引用“that”时出错在（…）
？有时我不得不做一些事情，比如，
（$（文档）。在（'click'，'#…slug…'，function（that）{…func…}）。调用（that）；
我接受了诺高德给出的建议，但它还不起作用。我在（function（）{…）得到“String不是函数”自我调用函数呃，非常感谢：）不用担心。需要注意两件事：1）立即调用（/自我调用）函数非常适合创建私有属性：
var public\u obj=（function（）{var private\u var=23，private\u func=function（num）{return private_var+num；}，public_method=function（num）{return private_func（num）}，public_api={add_num:public_method}；return public_api；}（）；
所有私有内容都是防篡改的。即使接口被破坏，其内部也不会受损。2）如果它是一个赋值，您只需
=func（）{}（）
如果没有赋值，则将其包装
（func（）{}（））