Question

我有一个奇怪的问题。我想要具有日期格式下拉菜单的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内容时，我可以选择日历。但是，当我更改格式下拉列表时，它不是在日期选择器中格式化日期。

Answer 1

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

像这样引用它

admin

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

工作伪代码示例。

HTML +脚本

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

PHP -将Ajax调用发送到的文件

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

ajax上的jQuery UI datepicker dateformat不起作用

1 个答案: