Hey guys,

I'm new to javascript and jQuery, so be gentle

The issue is when I hook actions to id's

        for(var i = 0; i < categoryNames.length;i++)
                    var category = Sanitize(categoryNames[i]);
                    for(var j=0; j < categoryExpenses[i].length;j++)
                        var expense = Sanitize(categoryExpenses[i][j]);
                        $('#' + category + "_" + expense+"_type").change(function() {
                        $('#' + category + "_" + expense+"_amount").keyup(function() {
                            var tmpi = i;
Essentially what I am trying to do is pragmatically hook listeners to a ton of option selection boxes and input fields.

Since the "keyup" and "change" hooks are only called when they happen, I understand why "i" and "j" will always be "categoryNames.length+1" and "categoryExpenses[i].length+1" respectively. (because the iteration will have already happened and they would have already dropped out of the for loops, thus later when an action happens it will be what is last was) what I do not understand is why "tmpi" is always equal to "categoryNames.length+1".

I assumed (obviously incorrectly) that a variable declared within the scope of the internal hook function would only take on the value passed to it at inception. I appears as if the function doesn't actually get instantiated until it is called by a "keyup" or a "change". If this is the case I don't know how to generate lots of these hooks without doing them one at a time that would be a ludicrous. (my project will involve hundreds of these tedious things) Another option is to write a script to generate all code and then just copy paste it. Either way I really don't like how messy and inefficient that is.

I guess my question is, "How do I pragmatically do this for 60-70 different objects without making my code nightmarish?"