如何在一个循环中创建多个jQuery对话框

我想在一个循环内生成多个jQuery对话框。有趣的是，如果我硬编码function()中的对话框，如#dialog1.dialog({...})和#dialog2.dialog({...})等等，它的工作原理！
但是，如果我在循环中生成这些功能，它不起作用！
这里是示范代码：如何在一个循环中创建多个jQuery对话框

<div id=object><div> 
<script type="text/javascript"> 

var array =['1','2','3','4','5','6','7','8']; 
$(document).ready(function() { 
    for(var i = 0; i < 7 ; i++) { 
     $("#dialog"+array[i]).dialog({ 
      autoOpen: false, 
      width: "auto", 
      show: { 
       effect: "blind", 
       duration: 500 
      }, 
      hide: { 
       effect: "blind", 
       duration: 500 
      } 
     }); 

     $("#opener"+array[i]).click(function() { 
      $("#dialog"+array[i]).dialog("open"); 
     }); 
    } 
}); 

for(var i = 0; i < 7 ; i++) { 
    $("#object").append("<button id=\opener"+array[i]+">Details</button> "); 
    $("#object").append("<div class=\"dialog\" id=\"dialog"+array[i]+"\"title=\"Details\"></div>"); 
}; 

</script> `

这将是很亲切，如果有人可以帮助我！

来源

2014-05-06 user3607562

在添加监听器后添加按钮。查看jQuery的“委托事件”。你也可以替换我来代替'array [i]'并将你的for循环更改为'for（var i = 1; i = <8; i ++）' –

@RobSchmuecker：不，他不是。监听器位于doc.ready中，而添加动态元素不是。（@）OP：代码似乎没问题......如果用简单的'alert（i）;'改变'.dialog（）'调用会怎么样？所有的盒子都能看到吗？另外，你的for循环应该是'for（var i = 0; i <8; i ++）'，因为你在数组中有8个项目:) – Flater

@RobSchmuecker：'for（var i = 1; i = <8; i ++ ）'将用于基于1的数组，或者你会强制不断使用'i-1'。 – Flater

包含在文档准备功能下面的代码

for(var i = 0; i < 7 ; i++) { 
$("#object").append("<button id=\opener"+array[i]+">Details</button> "); 
$("#object").append("<div class=\"dialog\" id=\"dialog"+array[i]+"\"title=\"Details\"></div>"); 
}

来源

2014-05-06 10:06:10

它似乎被故意遗漏了，所以它会在尝试对这些元素执行'.dialog（）'之前创建动态元素*。我没有看到为什么*必须包含在doc.ready中;你能详细说明一下吗？ – Flater

您需要通过交换你的循环。目前，您正尝试在DOM存在之前访问#dialogX元素。实际上，您可以将两个循环合并为一个，这会创建按钮和对话框元素，然后安装对话框。

var array =['1','2','3','4','5','6','7','8']; 

$(document).ready(function() { 
    for (var i = 0; i < array.length; i++) { 
     var $dialog = $('<div />', { 
      class: 'dialog', 
      id: 'dialog' + array[i], 
      title: 'Details' 
     }).dialog({ 
      autoOpen: false, 
      width: "auto", 
      show: { 
       effect: "blind", 
       duration: 500 
      }, 
      hide: { 
       effect: "blind", 
       duration: 500 
      } 
     }); 

     var $button = $('<button />', { 
      id: 'opener' + array[i], 
      text: 'Details' 
     }).click(function() { 
      $("#dialog" + array[i]).dialog("open"); 
     }); 

     $("#object").append($button, $dialog); 
    } 
});

来源

2014-05-06 10:06:30

就我看到的，在OP的例子中，顺序没有被颠倒过来。监听器位于doc.ready中，而动态元素的添加不是（因此它首先被执行） – Flater

如何在一个循环中创建多个jQuery对话框

回答

相关问题