Jquery对话框中的动态Div内容

Dynamic Div content in Jquery Dialog

本文关键字：Div 内容动态对话框 Jquery 更新时间：2023-09-26

我正在尝试显示具有动态div内容的对话框，在div中我正在尝试添加span、文本框和按钮，但Jquery对话框没有显示。在这个问题上帮助我

提前感谢您的回答

 <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8" />
                <title>Jquery Dynamic Div</title>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
                <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
                <script src="JQUERY/jquery-ui.js"></script>
                <style type="text/css">
                .ui-datepicker
                { 
                    width: 17.5em;
                    height: 16.6em;
                    font-size:12.5px;
                    margin-left: 120px;
                    z-index: 1000;
                }    
                </style>
                <script type="text/javascript">
                    $(document).ready(function ()
                    {
                        $("#btnSubmit").click(function ()
                        {
                            alert("inside");
                            var DynamicDiv = $('<div id="ExpiryDatePopup" style="display:block;width:680px;height:327px;background-color:#FFFFFF;></div>');
                            alert("Div Created");
                            var breakTag1 = $('</br>');
                            alert("Div Created");
                            var breakTag2 = $('</br>');
                            var ExpDateText = $('<span style="color: steelblue;margin-left: 55px;">Please enter the Expiration Date </span>');
                            var EndDateText = $('<span style="margin-left: 56px;position: relative;">End Date</span><span style="color: #f00">*</span>');
                            var DatePickerText = $('<input type="text" id="datepicker" readonly="true"  style="margin-left:32px" style="margin-left: 59px;margin-top: 29px;position: static;top: 85px;"/>');
                            var SubMitButton = $('<input type="button" id="popUpSubmit" value="Submit" style="margin-left: 128px;margin-top: 78px;height: 28px;width: 82px;" />');
                            alert("Div Created");
                            $('body').append(DynamicDiv);
                            $('#ExpiryDatePopup').append(breakTag1);
                            $('#ExpiryDatePopup').append(breakTag2);
                            $('#ExpiryDatePopup').append(breakTag1);
                            $('#ExpiryDatePopup').append(ExpDateText);
                            $('#ExpiryDatePopup').append(DatePickerText);
                            $('#ExpiryDatePopup').append(SubMitButton);
                            alert("hi sam");
                            $('#ExpiryDatePopup').dialog(
                            {
                                height: 400,
                                width: 600,
                                title: 'Expiration Date',
                                position: 'center',
                                background: 'red',
                                opacity: '0.3',
                                modal: true,
                                open: function ()
                                {
                                    $("#datepicker").datepicker({ dateFormat: 'yy-mm-dd',
                                        minDate: dateToday,
                                        showOn: 'button',
                                        buttonText: 'Show Date',
                                        buttonImageOnly: true,
                                        buttonImage: 'Images_/icon_calendar.jpg'
                                    });
                                }
                            });
                        });
                    });

                </script>
            </head>
            <body>
                <input type="button" id="btnSubmit" value="Submit"/>
            </body>
        </html>

我已经试过你的代码了，它对我来说很好。

唯一的问题是创建<div id="ExpiryDatePopup"></div>

您忘记关闭ExpiryDatePopupdiv样式属性。

测试代码

<!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8" />
                <title>Jquery Dynamic Div</title>
                 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
                <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
                <style type="text/css">
                .ui-datepicker
                { 
                    width: 17.5em;
                    height: 16.6em;
                    font-size:12.5px;
                    margin-left: 120px;
                    z-index: 1000;
                }    
                </style>
                <script type="text/javascript">
                    $(document).ready(function ()
                    {
                        $("#btnSubmit").click(function ()
                        {
                            var DynamicDiv = $('<div id="ExpiryDatePopup" style="display:block;width:680px;height:327px;background-color:#FFFFFF;" /></div>');
                            var breakTag1 = $('</br>');
                            var breakTag2 = $('</br>');
                            var ExpDateText = $('<span style="color: steelblue;margin-left: 55px;">Please enter the Expiration Date </span>');
                            var EndDateText = $('<span style="margin-left: 56px;position: relative;">End Date</span><span style="color: #f00">*</span>');
                            var DatePickerText = $('<input type="text" id="datepicker" readonly="true"  style="margin-left:32px" style="margin-left: 59px;margin-top: 29px;position: static;top: 85px;"/>');
                            var SubMitButton = $('<input type="button" id="popUpSubmit" value="Submit" style="margin-left: 128px;margin-top: 78px;height: 28px;width: 82px;" />');
                            $('body').append(DynamicDiv);
                            $('#ExpiryDatePopup').append(breakTag1);
                            $('#ExpiryDatePopup').append(breakTag2);
                            $('#ExpiryDatePopup').append(breakTag1);
                            $('#ExpiryDatePopup').append(ExpDateText);
                            $('#ExpiryDatePopup').append(DatePickerText);
                            $('#ExpiryDatePopup').append(SubMitButton);
                            $('#ExpiryDatePopup').dialog(
                            {
                                height: 400,
                                width: 600,
                                title: 'Expiration Date',
                                position: 'center',
                                background: 'red',
                                opacity: '0.3',
                                modal: true,
                                open: function ()
                                {
                                    $("#datepicker").datepicker({ dateFormat: 'yy-mm-dd',
                                        minDate: dateToday,
                                        showOn: 'button',
                                        buttonText: 'Show Date',
                                        buttonImageOnly: true,
                                        buttonImage: 'Images_/icon_calendar.jpg'
                                    });
                                }
                            });
                        });
                    });

                </script>
            </head>
            <body>
                <input type="button" id="btnSubmit" value="Submit"/>
            </body>
        </html>

您在创建div时也有错误，忘记关闭样式属性。

$('#ExpiryDatePopup').live('click',function(){
  //write append code here
});