动态股利内容jQuery的对话框

我想用动态的div内容显示对话框，在div里面我试图添加跨度，文本框和按钮，但Jquery的对话框不displaying.Help我在这个问题上动态股利内容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>

来源

2013-02-20 Vignesh

'变种DynamicDiv = $（ '

2013-02-20 12:05:22

你刚开任何错误?? – bipen 2013-02-20 12:05:36

你检查我的答案？ – 2013-02-20 12:08:25

以及我曾尝试你的代码和它的工作对我来说很好。

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

您忘记关闭ExpiryDatePopup DIV style属性。

测试的代码

<!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-20 11:59:13

感谢您的帮助，但日期选择器是不工作/显示 – Vignesh 2013-02-21 03:25:05

@Vignesh确实datepicker js被添加.. ?? cz我看不到它在代码 – 2013-02-21 03:29:23

@ dipesh-parmaresh我正在使用jquery datepicker插件。代码现在正在工作。感谢您的帮助 – Vignesh 2013-02-23 02:56:18

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

来源

2013-02-20 11:55:47 sasi

@Dipesh但他在这里使用。 jQuery的1.7，从1.9我们必须使用（）为生活（） – sasi 2013-02-20 11:59:04

没有什么处理点击事件要么.. – 2013-02-20 12:13:34

我觉得包装所有这些都很容易.. – sasi 2013-02-20 12:17:36

动态股利内容jQuery的对话框

回答

相关问题