用于循环的Jquery动态按钮对话框不填充功能 [英] Jquery dynamic buttons dialog for in loop doesn't populate function

问题描述

我正在为jQuery对话框创建动态按钮。 json对象包含按钮的信息。我正在使用for in循环来遍历对象中的每个属性。当我循环遍历新对象时，正在填充每个按钮的匿名函数为空白，但显示每个函数在对话框中实际点击时填充最后一个值。

对话框的代码：

  $（'＃dialogDiv'）。对话框（{
 autoOpen ：false，
 modal：true，
 resizable：false，
 width：600，
 height：100，
 position：center，
 overlay ：{
 opacity：0.2，
 background：black
} 
}）; 
  

从json对象创建按钮的代码：

  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）; 
} 
} 
} 
} 
  

如果我循环遍历newObj，每个函数都为空。

  for（var z in newObj）{
 console.log newObj [Z]）; 
} 
  

将按钮对象添加到对话框中，然后打开它。

  $（'＃dialogDiv'）对话框（{buttons：newObj}）; 
 $（'＃dialogDiv'）。对话框（open）; 
  

当任何按钮被点击时，控制台显示它们都具有与nl变量相同的值里面的功能。为什么这个设置不正确？可变范围？我知道这可能会更容易使用第二个for循环，但我认为这是嵌套循环的范围问题。我也没有包含点击事件的代码来触发这个功能，但这不是问题。

解决方案

  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+ j）; 
} 
} 
 newObj [nl] = testfn（nl）; 
} 
} 
} 
 
 
 for（var z in newObj）{
 newObj [z]（）; 
} 
  

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.

解决方案

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

这篇关于用于循环的Jquery动态按钮对话框不填充功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！