Question

我有以下代码

<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

包含一个带有class ='datepicker'的jquery ui datepicker。在第一次加载时，datepicker正常工作。但是当我点击按钮重新加载它时，内容将替换为新内容。但是datepicker不能正常工作。我已经尝试在ajax成功处理程序中初始化datepicker，如你所见。但它也失败了。问题是什么。如何解决？

Answer 1

您需要{Ajner成功的reinitialize日期选择器

$('.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");
        }
    });
});

Answer 2

您正在寻找的答案可能与此问题类似： jQuery datepicker won'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");
    });
});

Answer 3

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

Mooed Farooqui对Ajax成功reinitialize的建议有效，但不是最初的。

结束我还在调用datepicker中的my_ajax_stuff.php函数。在我把它拿出来之后，它完全适用于按钮重载和回发。希望这可以帮助那些偶然发现这个老问题的人...

Answer 4

在override func layoutSubviews() { super.layoutSubviews() self.contentView.layoutMargins.left = CGFloat(self.indentationLevel) * self.indentationWidth self.contentView.layoutIfNeeded() }功能中调用您的选择器。

.ajaxComplete

这是link

Answer 5

这可能是一个原始的解决方案，但是我发现，如果我在主文档中有一个函数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：是的， changeYear：正确 }）; $（obj）.datepicker（“ show”）; } 就像我说的那样，它很粗糙，但是可以用。

我的表格显示排序方式时遇到问题。我有它，所以当您进入页面时，您可以单击1个字段来选择日期。如果单击标题之一，它将对SQL命令进行排序，然后重新显示该表。这将破坏.datepicker函数。因此，我将其更改为不读取类，而是单击并触发函数。试图使其在.class上运行的问题在于，它会在重绘表后初始化并失去DOM的范围。

jQuery datepicker在ajax调用后无法正常工作

5 个答案: