Ajax调用后的jQuery日期选择器不工作 [英] jQuery datepicker does not work after Ajax call

问题描述

这里的情况是：我使用jQuery动态加载的形式。在这种形式中，是从jQueryUI的一个datepicker。问题是，该日期选择器加载在第一时间，但如果形式被再次装载时，日期选择器不起作用。我知道我需要在页面加载每次重新绑定日期选择器功能，但我所有的尝试都失败了。任何帮助将是AP preciated！

低于code片断：

 函数makeMyDay（）
{
    $（日期选择器）。日期选择器（
    {
        内联：真
    }）;
}

功能getNewPage（ID，idTwo）
{
    $阿贾克斯（
    {
        键入：GET，
        网址：foo.php，
        数据：ID =+的id，
        成功：函数（数据）
        {
            $（'巴'+ idTwo）。html的（数据）;
            makeMyDay（）;
        }
    }）;
}
 

以防万一它需要澄清，foo.php被装入的.bar。该日期选择器本身是在foo.php，外部JS文件都在主文件，不foo.php

修改

更新跌破code，但问题依然存在：

  $（函数（）
{
    $（'。日期选择器），日期选择器（{在线：真}）。
}）;

功能getNewPage（ID，idTwo）
{
    $阿贾克斯（
    {
        键入：GET，
        网址：foo.php，
        数据：ID =+的id，
        成功：函数（数据）
        {
            $（'巴'+ idTwo）。html的（数据）.find（日期选择器）。日期选择器（
            {
                内联：真
            }）;
        }
    }）;
}
 

解决方案

开关 $（makeMyDay）; 到 makeMyDay（）; 应该做的伎俩，因为makeMyDay是一个函数，而不是一个选择。

或者尝试绑定的日期选择器（）的AJAX调用后直接就.datepicker在的.bar容器这应该工作：

 函数getNewPage（ID，idTwo）
{
    $阿贾克斯（{
        键入：GET，
        网址：foo.php，
        数据：ID =+的id，
        成功：功能（数据）{
             $（'巴'+ idTwo）。html的（数据）.find（日期选择器）。日期选择器（{
                   内联：真
              }）;
        }
    }）;
}
 

一个工作示例，模拟过程可以在这里找到： http://jsfiddle.net/7wBWB

Here is the situation: I'm using jQuery to dynamically load a form. In that form, there is a datepicker from jQueryUI. The problem is that the datepicker loads the first time, but if the form is loaded again, the datepicker doesn't work. I know I need to rebind the datepicker function each time the page is loaded, but all of my attempts have failed. Any help would be appreciated!

Code snippet below:

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

Just in case it needs clarifying, foo.php gets loaded into .bar. The datepicker itself is in foo.php, and the external JS files are in the main file, not foo.php.

Edit

Updated code below, but the problem still persists:

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

解决方案

Switch $(makeMyDay); to makeMyDay(); should do the trick because makeMyDay is a function and not a selector.

Or try to bind the datepicker() directly after the ajax-call as far as .datepicker is in the .bar container this should work:

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

A working example that simulates the process can be found here: http://jsfiddle.net/7wBWB

这篇关于Ajax调用后的jQuery日期选择器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！