ajax 上的 jQuery UI datepicker dateformat 不起作用答案

【问题标题】：jQuery UI datepicker dateformat on ajax didn't workajax 上的 jQuery UI datepicker dateformat 不起作用
【发布时间】：2019-11-10 11:46:11
【问题描述】：

我遇到了奇怪的问题。我想要带有日期格式下拉列表的 jQuery UI DatePicker。

我找到了this，并在页面加载时进行了测试并且工作正常。但是，当我通过 ajax 调用加载页面时，相同的代码不起作用。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
  <script type="text/javascript">
  $( function() {
    $( "#id_management_date" ).datepicker();
    $( "#id_management_date_format" ).on( "change", function() {
    alert(3);
      $( "#id_management_date" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
  } );
  </script>

在加载 ajax 内容时，我可以选择日历。但是当我更改格式下拉菜单时，它不是在 datepicker 中格式化日期。

【问题讨论】：

我在 stackoverflow.com 上尝试了很多解决方案，但没有任何效果
这里没有任何问题。动态创建元素的事件绑定？所有事件都在工作。只是更新价值不起作用 thts 为什么在这里发布
你好@mplungjan，你为什么不读它。甚至没有问题。问题只是关于更新价值。所有功能，事件都在ajax中工作
那么信息太少，无法给出正确答案。加载 ajax 时代码不起作用。怎么装？您是否也使用 getScript 加载脚本？
加载此代码时，页面上是否存在 id 为“id_management_date_format”的元素？请务必阅读Event binding on dynamically create elements。

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

这是因为该元素是在页面加载后动态加载的，而不是原始 DOM 的一部分。

像这样引用它

    $("body").on("change", "#id_management_date_format", function(){
        alert(3);
        $( "#id_management_date" ).datepicker( "option", "dateFormat", $( this ).val() );
    });

编辑：在运行本地测试后，这是同样的问题，但在日期选择器输入的初始化期间，在它们被添加到 DOM 之前。

示例工作伪代码。

HTML + 脚本

<!DOCTYPE>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    </head>
    <body>
    <header></header>
    <div id="holder">
        <input type="button" onclick="GetDatePickers();" value="Get Date Picker Inputs"/>
    </div>
    <footer></footer>
    <script>
        function GetDatePickers(){
            $.ajax({
                type:"post",
                url:"getdatepickers.php",
                data:{test:"test"},
                success:function(response){
                    console.log(response);
                    $("#holder").append(response);
                    $( "#id_management_date" ).datepicker();
                    $( "#id_management_date_format" ).datepicker("option", "dateFormat");
                },
                error:function(resposne){
                    console.log(response);
                }
            });
        };
        $(function() {
            $( "body" ).on( "change", "#id_management_date_format", function() {
                alert(3);
                console.log($(this).val());
                $( "#id_management_date" ).datepicker( "option", "dateFormat", $(this).val());
            });
        });
    </script>
    </body>
</html>

PHP - 发送 Ajax 调用的文件

if(isset($_POST['test'])){
    $html =  <<<DOC
    <input type="text" id="id_management_date"/>
    <input type="text" id="id_management_date_format"/>
DOC;
    echo $html;
}

【讨论】：

它的警报但不更新值离子日历文本框
是的，问题是我的函数调用高于 $("#holder").append(response);.