Question

刷新 div 后日期选择器不起作用

2018-08-23

2644

javascript jquery jquery-ui-datepicker uidatepicker

页面加载时日期选择器工作正常，但刷新 div 后不工作

出现错误，如

jquery-ui.js:8633 Uncaught TypeError: Cannot read property 'settings' of undefined error

我的代码如下

<!DOCTYPE html>
<html>
<head>
    <title>Image Select</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


</head>
<body>
    <div class="subscription-container">
      <input id="hiddenDate" type="hidden"/>
      <button type="button" id="pickDate" class="btn btn-trial">Change shipping date</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#hiddenDate').datepicker({
            minDate: 0
        });
        jQuery(document).on('click','#pickDate',function (e) {
        // $('#pickDate').click(function (e) {
            jQuery('#hiddenDate').datepicker("show");
            // e.preventDefault();
        });
    });
    jQuery(document).on('change','#hiddenDate',function(){
            jQuery('#hiddenDate').datepicker("hide");

        if(confirm("are you sure to reload")==true){
            jQuery('.subscription-container').load(window.location.href+" .subscription-container>*","");

        }
     });
    </script>
</body>
</html>

Answer 1

<html>
<head>
    <title>Image Select</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
    <div class="subscription-container">
      <input id="hiddenDate" type="hidden" />
      <button type="button" id="pickDate" class="btn btn-trial">Change shipping date</button>
  </div>


  <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#hiddenDate').datepicker({
            minDate: 0,
        });

        $('#pickDate').click(function () {
            jQuery('#hiddenDate').datepicker("show");
        });
    });

    jQuery('#hiddenDate').change(function(){
        jQuery('#hiddenDate').datepicker("hide");

        if(confirm("are you sure to reload")==true){
           setTimeout(function(e) {
            e.preventDefault()
            jQuery('.subscription-container').load(window.location.href+" .subscription-container>*","");
        }, 100);
       }
   });
</script>
</body>
</html>

Answer 2

在标题标签中的日期选择器插件链接上方使用 Jquery 库或 CDN 的链接。

Amit Singh

2018-08-23

Answer 3

我试过下面的代码，效果很好。你能告诉我如何刷新 DIV 吗？

jQuery(function($) {
    var currentDate = new Date();
    $('#hiddenDate').datepicker({
       minDate: 0
    });
    $(document).on('click','#pickDate',function (e) {
        $('#hiddenDate').datepicker("show");
    });
	$('#btnRefresh').click(function(){
	 $.ajax({url: "https://restcountries.eu/rest/v2/region/europe", success: function(result){
	 console.log(result);
	     $.each(result,function(index,value){
		  $('#myTable tbody').append('<tr class="child"><td>'+value.name+'</td></tr>');
		 })
    }});
	});
});

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input id="hiddenDate" name="hiddenDate" type="text"/>
<button type="button" id="pickDate" class="btn btn-trial">Change shipping date</button>

<button type="button" id="btnRefresh" class="btn btn-trial">Refresh</button>
<table id="myTable">
<tbody>
</tbody>
</table>
</body>
</html>

更新代码后，使用刷新按钮即可工作。请发送示例代码给你