jQuery datepicker 在 Ajax 调用后不起作用答案

【问题标题】：jQuery datepicker does not work after Ajax calljQuery datepicker 在 Ajax 调用后不起作用
【发布时间】：2012-12-14 18:44:23
【问题描述】：

情况如下：我正在使用 jQuery 来动态加载表单。在这种形式中，有一个来自 jQueryUI 的日期选择器。问题是日期选择器第一次加载，但是如果再次加载表单，日期选择器就不起作用。我知道每次加载页面时我都需要重新绑定 datepicker 函数，但我所有的尝试都失败了。任何帮助将不胜感激！

下面的代码sn-p：

function makeMyDay() 
{
    $(".datepicker").datepicker(
    {
        inline: true
    });
}

function getNewPage(id,idTwo)
{
    $.ajax(
    {
        type: "GET",
        url: 'foo.php',
        data: "id=" + id,
        success: function(data) 
        {
            $('.bar' + idTwo).html(data);
            makeMyDay();
        }
    });
}

以防万一需要澄清，将 foo.php 加载到 .bar 中。 datepicker 本身在 foo.php 中，外部的 JS 文件在主文件中，而不是 foo.php。

编辑

更新了以下代码，但问题依旧：

$(function()
{
    $('.datepicker').datepicker({inline: true});
});

function getNewPage(id,idTwo)
{
    $.ajax(
    {
        type: "GET",
        url: 'foo.php',
        data: "id=" + id,
        success: function(data) 
        {
            $('.bar' + idTwo).html(data).find(".datepicker").datepicker(
            {
                inline: true
            });
        }
    });
}

【问题讨论】：

这看起来很奇怪$(makeMyDay);
你是对的，只是修复了它，但问题仍然存在。
也许您必须先销毁日期选择器，然后再尝试重新创建它。
你能举一个你在想什么的例子吗？我迅速尝试销毁日期选择器，但它似乎没有做任何事情。
糟糕，它是内联的。 :)

标签： jquery ajax datepicker

【解决方案1】：

将 $(makeMyDay); 切换到 makeMyDay(); 应该可以解决问题，因为 makeMyDay 是一个函数而不是选择器。

或者尝试在 ajax 调用之后直接绑定 datepicker()，只要 .datepicker 在 .bar 容器中，这应该可以：

function getNewPage(id,idTwo)
{
    $.ajax({
        type: "GET",
        url: 'foo.php',
        data: "id=" + id,
        success: function(data) {
             $('.bar' + idTwo).html(data).find(".datepicker").datepicker({
                   inline: true
              });
        }
    });
}

可以在此处找到模拟该过程的工作示例：http://jsfiddle.net/7wBWB

【讨论】：

这就是我认为的问题，但不幸的是我刚刚尝试了你的代码，结果是一样的：日期选择器第一次加载，但后续加载失败。
看起来很奇怪。你有任何错误吗？我会尝试创建一个 jsfiddle 来帮助你。
我刚刚在这里尝试了这个过程，它可以正常工作jsfiddle.net/7wBWB - 你的“idTwo”变量中存储了什么？因为这会改变你的类选择器。你能提供你的 html 代码的一部分吗？
如果同一页面上有多个实例，我可以让 datepicker 工作，但由于某种原因，它会因 Ajax 调用而中断。在 idTwo 中，它只是来自 db 查询的变量：
它的工作方式是我有一个 foreach 循环，每个循环都带有一个 .bar + (ID)。该特定的 .bar + (ID) 使用原始“id”加载 foo.php，然后从 foo.php 动态加载内容。

【解决方案2】：

今天下午我遇到了类似的问题并解决了，这要感谢@Chris Kempen 对在这里测试 hasDatePicker 类的想法的回答：jQuery datepicker won't work on a AJAX added html element

我使用这一行绑定了一个未被 ajax 调用更新的元素：

$('.container').on('focus', 'input[type=date]', this.bindDatepicker);

在this.bindDatepicker中，我选择了焦点而不是他的点击，但用他的想法来测试hasClass('hasDatepicker')。

我使用 Modernizr 来测试 Modernizr.inputtypes.date，然后加载绑定 datepicker 的文件。

【讨论】：

【解决方案3】：

试试这些代码。在我的情况下，它可以通过 ajax 加载内容

$(document).ready(function() {
 $('body').click(function(event) {
   if ($(event.target).is("#new_datepicker")) {
     $("#new_datepicker").datepicker({showOn: 'focus'}).focus();
   }
 });
});

【讨论】：