Php ajax调用后JQuery日期选择器不工作_Php_Jquery_Jquery Ui_Datepicker

Php ajax调用后JQuery日期选择器不工作

php jquery jquery-ui

Php ajax调用后JQuery日期选择器不工作,php,jquery,jquery-ui,datepicker,Php,Jquery,Jquery Ui,Datepicker,我有以下代码 <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_

我有以下代码

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


//包括所有与jquery相关的内容。此处未显示
$（'.datepicker'）.datepicker（{dateFormat:“dd-mm-yy”}）；
$（'#btn'）。单击（函数（）{
$.ajax({
键入：“获取”，
url：“my_ajax_stuff.php”，
成功：功能（响应）{
$（'#ct'）.html（回复）；
/*添加以下行以解决此问题..但不起作用*/
//$（“.datepicker”）.datepicker（{dateFormat:“dd-mm-yy”}）；
} ,
错误：函数（）{
$（'#ct'）.html（“获取数据时出现问题，请重试”）；
}
});
});

页面

my_ajax_stuff.php

包含一个类为'datepicker'的jquery ui日期选择器。在第一次加载时，日期选择器工作。但当我再次单击按钮重新加载它时，内容被替换为新内容。但日期选择器不工作。我已尝试在ajax成功处理程序中初始化日期选择器，如您所见。但它也失败了。问题是什么。如何解决它？？？

您需要在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");
        }
    });
});

您正在寻找的答案可能与此问题类似：

您将用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 Farooki关于在Ajax成功中重新初始化

的建议起到了作用，但不是一开始
最后，我还调用了与my_ajax\u stuff.php
等效的datepicker
函数。在我把它拿出来之后，它在按钮重新加载和回发上工作得非常好。希望这能帮助那些偶然发现这个老问题的人…
在.ajaxComplete
函数中调用您的选择器
$(document).ready(function () {
    // setup picker here...
});

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

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


以下是我的页面顶部的函数：
函数MakeDatePicker（obj）
{
$（obj）.日期选择器({
变化月：对，
变化年：对
});
$（对象）。日期选择器（“显示”）；
}
就像我说的，它很粗糙，但很有效
我对我的表格显示其排序的方式有意见。我有它，所以当你进入页面，你有一个字段，你可以点击选择一个日期。如果单击其中一个标题，它将对SQL命令进行排序，并重新显示该表。这将破坏.datepicker函数。所以我把它改为不读取类，而是点击，触发函数。试图让它在.class上运行的问题是，它会在重新绘制表后初始化，并失去DOM的作用域。
我已经尝试过了，这在ajax成功处理程序中有注释。。但是没有区别，成功回调中给出了什么：$（“.datepicker”）.length
？控制台有错误吗？顺便说一句，例如，当需要（尚未完成）在mouseenter上重新初始化datepicker时，您可以使用一种变通方法。Mouseenter应该被委派。length返回1。consoleplease中没有错误，请提供.datepicker元素的HTML代码，就像它在响应中一样
我已经用$（“.datepicker”）.datepicker（{dateFormat:“dd-mm-yy”}）；但不是worked@JinuJosephDaniel在这里工作很好。。。。你脑子里还有别的毛病code@charlietfl：事实并非如此。我在页面中已经有一个日期选择器..另一个正在覆盖..在您的情况下，您没有日期选择器..并且日期选择器是由ajax@JinuJosephDaniel这是你的工作场景finne我也会过滤它以防万一：$（“body”）。在（“click”，”。日期选择器：不是（.hasDatepicker）”，function（）{…}；@JinuJosephDaniel你能不能提供.datepicker元素的HTML标记，就像我10分钟前问你的那样？@JinuJosephDaniel我不知道，它应该可以工作，因为你已经尝试过检查你是否有“hasDatepicker”类！这对我来说是个问题。
<td><input type="date" class="EstDeliveryDatePicker" chassis="#chassis#" value= "#DateFormat(EstDelivery,'mm/dd/yy')#" onclick="MakeDatePicker(this);"></input></td>