如何在一個循環中創建多個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對話框

回答

相關問題