刷新 div 后日期选择器不工作

Question

页面加载日期选择器工作正常但刷新后 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

使用 Jquery 库的 link 或 header 标签中日期选择器插件 link 上方的 CDN。

Answer 2

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

更新了代码，刷新按钮正在运行。请发给你示例代码

刷新 div 后日期选择器不工作

Date picker not working after refresh the div

javascript

jquery

uidatepicker

jquery-ui-datepicker