Javascript jQuery向jQuery对话框追加/添加隐藏div

我正在尝试将HTML文件中的div元素追加/添加到对话框中（该对话框当前有一些按钮）。该div在页面加载时使用CSS类“hide”隐藏

HTML DIV:

<section>
            <div id="deliveryMethod" title="Delivery Method" class="hide">
                <p>Please select delivery method and special requirements.</p>                    
                <ul>
                    <li>
                        <label>Method:</label>
                    </li>
                    <li>
                        <div>
                            <select for="deliveryService">
                                <option value="">Please select...</option>
                                <option value="FedEx">FedEx</option>
                                <option value="UPS">UPS</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label>Special Requirements:</label>                            
                    </li>
                    <li>
                        <textarea id="specialRequirements" type="text" value=""  maxlength="220"></textarea>
                    </li>
                </ul>
            </div>
    </section>

function deliveryServiceClick() {

$("#dialogDiv").dialog("open");

if ($('#dialogDiv').length == 0) {
    $('body').append("<div id='dialogDiv'><div/>");
}
var dialogDiv = $('#dialogDiv');

dialogDiv.attr("Title", "Please select your chosen delivery service.");
dialogDiv.html("<div id='deliveryMethod'><div/>");
$('body').append("<div id='deliveryMethod'><div/>");

dialogDiv.dialog({
    modal : true,
    buttons : [
            {
                text : "Process",
                class : 'large',
                click : function() {
                    //              
                }
            },
            {
                text : "Cancel",
                class : 'large',
                click : function() {
                    $(this).dialog('close');
                }
            } ]
});
}

jQuery当点击一个按钮时，在我调用的函数下面：

<section>
            <div id="deliveryMethod" title="Delivery Method" class="hide">
                <p>Please select delivery method and special requirements.</p>                    
                <ul>
                    <li>
                        <label>Method:</label>
                    </li>
                    <li>
                        <div>
                            <select for="deliveryService">
                                <option value="">Please select...</option>
                                <option value="FedEx">FedEx</option>
                                <option value="UPS">UPS</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label>Special Requirements:</label>                            
                    </li>
                    <li>
                        <textarea id="specialRequirements" type="text" value=""  maxlength="220"></textarea>
                    </li>
                </ul>
            </div>
    </section>

function deliveryServiceClick() {

$("#dialogDiv").dialog("open");

if ($('#dialogDiv').length == 0) {
    $('body').append("<div id='dialogDiv'><div/>");
}
var dialogDiv = $('#dialogDiv');

dialogDiv.attr("Title", "Please select your chosen delivery service.");
dialogDiv.html("<div id='deliveryMethod'><div/>");
$('body').append("<div id='deliveryMethod'><div/>");

dialogDiv.dialog({
    modal : true,
    buttons : [
            {
                text : "Process",
                class : 'large',
                click : function() {
                    //              
                }
            },
            {
                text : "Cancel",
                class : 'large',
                click : function() {
                    $(this).dialog('close');
                }
            } ]
});
}

功能交付服务点击（）{
$（#dialogDiv”）.dialog（“打开”）；
如果（$（'#dialogDiv'）。长度==0）{
$（'body'）。追加（“”）；
}
var dialogDiv=$（“#dialogDiv”）；
dialogDiv.attr（“标题”，“请选择您选择的送货服务”）；
dialogDiv.html（“”）；
$（'body'）。追加（“”）；
dialogDiv.dialog({
莫代尔：是的，
按钮：[
{
案文：“进程”，
班级：'大'，
单击：函数（）{
//              
}
},
{
文本：“取消”，
班级：'大'，
单击：函数（）{
$（this.dialog（'close'）；
}
} ]
});
}

如您所见，我尝试使用以下方法附加/显示隐藏的div：

dialogDiv.html("<div id='deliveryMethod'><div/>");
$('body').append("<div id='deliveryMethod'><div/>");

dialogDiv.html（“”）；
$（'body'）。追加（“”）；

然后，jQuery中定义的按钮将显示在div下面

任何帮助都将不胜感激

谢谢

试试看

function deliveryServiceClick() {
    var dialogDiv = $('#dialogDiv');

    $("#dialogDiv").dialog("open");

    if (dialogDiv.length == 0) {
        dialogDiv = $("<div id='dialogDiv'><div/>").appendTo('body');
        $('#deliveryMethod').appendTo(dialogDiv).removeClass('hide')
        dialogDiv.attr("Title", "Please select your chosen delivery service.");

        dialogDiv.dialog({
            modal : true,
            buttons : [
                {
                    text : "Process",
                    class : 'large',
                    click : function() {
                        //              
                    }
                },
                {
                    text : "Cancel",
                    class : 'large',
                    click : function() {
                        $(this).dialog('close');
                    }
                } ]
        });
    }else{
        dialogDiv.dialog("open");
    }
}

功能交付服务点击（）{
var dialogDiv=$（“#dialogDiv”）；
$（#dialogDiv”）.dialog（“打开”）；
if（dialogDiv.length==0）{
dialogDiv=$（“”）。appendTo（'body'）；
$（'#deliveryMethod'）.appendTo（dialogDiv.removeClass（'hide'））
dialogDiv.attr（“标题”，“请选择您选择的送货服务”）；
dialogDiv.dialog({
莫代尔：是的，
按钮：[
{
案文：“进程”，
班级：'大'，
单击：函数（）{
//              
}
},
{
文本：“取消”，
班级：'大'，
单击：函数（）{
$（this.dialog（'close'）；
}
} ]
});
}否则{
dialogDiv.dialog（“打开”）；
}
}

---

演示：

您的问题是什么？在附加div之后。删除类“hide”。试试看