2

我正在尝试显示具有动态 div 内容的对话框，在 div 内我尝试添加跨度、文本框和按钮，但未显示 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>
4

2 回答 2

0 
$('#ExpiryDatePopup').live('click',function(){
  //write append code here
});
于 2013-02-20T11:55:47.220 回答
0

好吧，我已经尝试了您的代码，并且它对我来说工作正常。

唯一的问题是创造<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 时也有错误，您忘记关闭样式属性。

于 2013-02-20T11:59:13.960 回答