Javascript Weird - I'm clueless
===

I'm working on this menu-system that's very similar to how operating systems do them.
Using jquery etc.

I have 2 comments down in the For Loop. It's basically outputting the last index each in the $(document).on('click')... function. But outside the document.on it works fine.

It's probably just an obvious problem but I've spent about an hour on this.. Thanks in advance!


        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.
        				});
        			}
        		}
        	}
        }
