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

【问题标题】：Date picker not working after refresh the div刷新div后日期选择器不起作用
【发布时间】：2018-08-23 08:43:29
【问题描述】：

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

它给出了类似的错误

jquery-ui.js:8633 Uncaught TypeError: Cannot read property 'settings' 未定义的错误

我的代码在下面

<!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>

【问题讨论】：

我现在正在编辑我的代码，希望您能理解我遇到的问题。

标签： javascript jquery jquery-ui-datepicker uidatepicker

【解决方案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>

【讨论】：

我希望这个答案对你有帮助。
jQuery('.subscription-container').load(window.location.href+" .subscription-container>*",""); ----->在此行之后添加此location.reload();
location.reload(); 重新加载页面，但我只想刷新 div 而不是页面。
如果我添加location.reload();，则无需添加jQuery('.subscription-container').load(window.location.href+" .subscription-container>*","");
在我的答案中编辑上面的代码，将其放入您的文件中并检查。

【解决方案2】：

使用 Jquery 库或 CDN 的链接，就在标题标签中 datepicker 插件链接的上方。

【讨论】：

页面上有
标签吗？

【解决方案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>

更新了带有刷新按钮的代码，它正在工作。请发给你示例代码

【讨论】：

我的代码第一次运行良好。实际上在单击按钮并选择日期然后调用 ajax 并在 ajax 响应 div 刷新后显示 ajax 响应
我在 html 代码中添加了刷新按钮，该按钮从 API 获取国家/地区并且工作正常