Jquery dynamic buttons dialog for in loop doesn't populate function

问题

I am creating dynamic buttons for a jQuery dialog. A json object contains the info for the buttons. I am using a for in loop to loop through each property in the object. The anonymous function that is being populated for each button is blank when I loop through the new object, but shows that each function is being populated with the last value when actually clicked on in the dialog.

Code for the dialog:

$('#dialogDiv').dialog({
        autoOpen:false,
        modal:true,
        resizable:false,
        width: 600,
        height:100,
        position:"center",
        overlay: { 
            opacity: 0.2, 
            background: "black" 
        } 
});

Code to create the buttons from a json object:

var obj1 = {but1:{Label:"button1"},but2:{Label:"button2"},but3:{Label:"button3"}};
var newObj = {};
for(var k in obj1){
    if (obj1.hasOwnProperty(k)){ 
        var ob2 = obj1[k];
        for(var x in ob2){
            var nl = ob2[x];
             newObj[nl] = function(){
                $(this).dialog("close");
                console.log(nl);
             }
        }
    }
}

If I loop through the newObj each function is blank.

for(var z in newObj){
    console.log(newObj[z]);
}

Adding the button object to the dialog, and opening it.

$('#dialogDiv').dialog({buttons : newObj});             
$('#dialogDiv').dialog("open");

When any of the buttons are clicked the console shows that they all have the same value for the nl variable inside the function. Why is this not being set correctly? Variable scope? I know this could have been written easier not using the second for loop, but I thought it was a scope problem with nested loops. I also didn't include the code for the click event that fires the function that does this, but that isn't the problem.

回答1:

var obj1 = { but1: { Label: "button1" }, but2: { Label: "button2" }, but3: { Label: "button3" } };
    var newObj = {};
    for (var k in obj1) {
        if (obj1.hasOwnProperty(k)) {
            var ob2 = obj1[k];
            for (var x in ob2) {
                var nl = ob2[x];
                var testfn = function (j) {
                    return function () {
                        alert("clicked on" + j);
                    }
                }
                newObj[nl] = testfn(nl);
            }
        }
    }


    for (var z in newObj) {
        newObj[z]();
    }

来源：https://stackoverflow.com/questions/11125322/jquery-dynamic-buttons-dialog-for-in-loop-doesnt-populate-function

标签

javascript

jquery

loops

dialog