Question

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

以下代码段：

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
            });
        }
    });
}

Answer 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

Answer 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的文件。

Answer 3

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

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

在Ajax调用之后，jQuery datepicker不起作用

3 个答案: