ajax调用后JQuery日期选择器不工作 - JQuery datepicker not working after ajax call

我有以下代码

<html>
    <head>
       //included all jquery related stuff ..not shown here
    </head>
    <body>
       <button id = 'btn' />
       <div id = 'ct'>
             <?php echo file_get_contents('my_ajax_stuff.php'); ?>
       </div>
    </body>
    <script>
       $('.datepicker').datepicker({dateFormat: "dd-mm-yy"});
       $('#btn').click(function() {
           $.ajax({
            type: "GET",
            url: "my_ajax_stuff.php" ,
            success: function(response) {
                $('#ct').html(response);
                /*added following line to solve this issue ..but not worked*/
                //$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"});
            } ,
            error: function () {
                $('#ct').html("Some problem fetching data.Please try again");
            }
        });
       });
    </script>
</html>

页面

my_ajax_stuff.php

包含一个类为"datepicker"的jquery ui日期选择器。在第一次加载时，日期选择器可以工作。但当我再次点击按钮重新加载时，内容会被新内容替换。但日期选择器不起作用。正如您所看到的，我已经尝试在ajax成功处理程序中初始化日期选择器。但它也失败了。问题出在哪里。如何解决？？？

您需要reinitialize Ajax成功中的日期选择器

$('.datepicker').datepicker({dateFormat: "dd-mm-yy"});
$('#btn').click(function() {
    $.ajax({
        type: "GET",
        url: "my_ajax_stuff.php" ,
        success: function(response) {
            $('#ct').html(response);
            $( "#datepicker" ).datepicker();
            /*added following line to solve this issue ..but not worked*/
            //$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"});
        } ,
        error: function () {
            $('#ct').html("Some problem fetching data.Please try again");
        }
    });
});

您正在寻找的答案可能与此问题类似：jQuery日期选择器获胜'；t work on a AJAX added html element

您将用ajax响应替换DOM中的datepicker元素。第一次这样做的原因是，PHP在第一次加载时已经在HTML中呈现了my_ajax_stuff.PHP，因此它可以在DOM中用于jQuery。

// do this once the DOM's available...
$(function(){
// this line will add an event handler to the selected inputs, both
// current and future, whenever they are clicked...
// this is delegation at work, and you can use any containing element
// you like - I just used the "body" tag for convenience...
    $("body").on("click", ".datepicker", function(){
            $(this).datepicker();
            $(this).datepicker("show");
    });
});

我遇到这个问题是因为我遇到了与OP相同的问题。

Mooed Farooqui向reinitialize推荐Ajax取得成功，但最初并不成功。

最后，我还在调用my_ajax_stuff.php中的datepicker函数。在我取出后，它在按钮重新加载和回发方面非常有效。希望这能帮助那些偶然发现这个老问题的人。。。

在.ajaxComplete函数内调用选择器。

$(document).ready(function () {
    // setup picker here...
});
$(document).ajaxComplete(function() {
   // setup picker here...
});

这是一个链接

这可能是一个原始的解决方案，但我发现，如果我在主文档中有一个函数MakeDatePicker，并且我在输入的OnChange部分使用了它，我就可以在ajax调用前后将任何对象（ajax或其他对象）变成日期选择器。这是函数和调用。（请注意，我有ColdFusion#函数，因为这是带有CFOutput的ColdFusion查询的返回。）

<td><input type="date" class="EstDeliveryDatePicker" chassis="#chassis#" value= "#DateFormat(EstDelivery,'mm/dd/yy')#" onclick="MakeDatePicker(this);"></input></td>

这是我页面顶部的功能：

函数MakeDatePicker（obj）{$（obj）.datepicker({changeMonth:true，changeYear:true})；$（obj）.datepicker（"显示"）；}

就像我说的，它很粗糙，但它有效。

我对我的表格显示排序的方式有意见。我有它，所以当你进入页面时，你有一个字段，你可以点击它来选择日期。如果单击其中一个标题，它将对SQL命令进行排序，并重新显示该表。这将破坏.datepicker函数。所以我把它改为不读取类，而是点击，触发函数。试图让它在.class上运行的问题是，它会在重新绘制表后初始化，并失去DOM的作用域。