2

情况如下：我正在使用 jQuery 动态加载表单。在这种形式中，有一个来自 jQueryUI 的日期选择器。问题是日期选择器第一次加载，但是如果再次加载表单，日期选择器就不起作用。我知道每次加载页面时我都需要重新绑定 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 中。日期选择器本身在 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
            });
        }
    });
}
4

3 回答 3

2

切换$(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

于 2012-12-30T01:51:11.610 回答
0

今天下午我遇到了类似的问题并解决了这些问题，这要感谢@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 的文件。

于 2013-01-16T00:19:24.973 回答
0

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

$(document).ready(function() {
 $('body').click(function(event) {
   if ($(event.target).is("#new_datepicker")) {
     $("#new_datepicker").datepicker({showOn: 'focus'}).focus();
   }
 });
});
于 2014-04-29T09:46:51.553 回答