如何在循環中創建多個jQuery對話框

Question

我試圖在一個循環內生成多個jQuery對話框。 有趣的是，如果我將對話框硬編碼在function() ，例如#dialog1.dialog({...})和#dialog2.dialog({...}) ，那么它就可以工作了！
但是，如果我在循環中生成這些函數，將無法正常工作！！！
這是示例代碼：

<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> `

如果有人可以幫助我，那將非常好！

Answer 1

在文檔准備功能中包含以下代碼

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>");
}

Answer 2

您需要交換循環。 目前，您正在嘗試訪問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);
    }
});