jQuery datepicker赢得'；不能使用添加了AJAX的html元素

我有一个jQuery datepicker函数绑定到“生日”输入html元素，写在页眉中：

<script type="text/javascript">
    $(function() {
        $( "#birthday" ).datepicker();
    });
</script>

$（函数（）{
$（“#生日”）.datepicker（）；
});

接下来，我有一些AJAX功能——它向页面添加了新的输入html元素。这一要素是：

<input type="text" id="birthday" value="" class="detail-textbox1" />

单击该生日元素不会在文本字段下方弹出日期选择器。我预料到了这一点，因为元素是在页面加载后添加的，因此它与页眉中提供的函数无关

我怎样才能让它工作？我尝试将脚本从标题移动到正文，但似乎没有任何效果。谢谢

另外，如果我在页面主体中创建了一个id=“birthday”的输入html元素，那么一切都会按照预期工作。似乎只有通过AJAX添加的元素功能不正常

您需要使用.live（），以便任何新添加的元素都附加了事件处理程序：

编辑

---

他说，这有点过时了。使用jquery（1.7+）的新版本。

您可以在ajax成功回调中为新添加的元素初始化日期选择器：

 $.ajax({

    ...

    success: function(response) {
        if(response.success) {
              $(body).append(response.html);
              $("#birthday").datepicker();
        }
    }
 });

---

鲍里斯：这对我非常有帮助。我还发现，如果您想使用Datepicker的日期范围选择，可以对AJAX html使用以下内容：

$('#groundtransporation').live('focus', function() {
var gt = $( "#rentalPickUp, #rentalDropOff" ).datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  numberOfMonths: 2,
  onSelect: function( selectedDate ) {
    var option = this.id == "rentalPickUp" ? "minDate" : "maxDate",
      instance = $( this ).data( "datepicker" ),
      date = $.datepicker.parseDate(
        instance.settings.dateFormat ||
        $.datepicker._defaults.dateFormat,
        selectedDate, instance.settings );
    gt.not( this ).datepicker( "option", option, date );
  }
});
});

---

我参加聚会有点晚了，但为了彻底起见，

.live（）

功能已经启动，我想我应该根据我的经验，以及从StackOverflow的其他答案中得到的所有帮助，提供一个更新的解决方案

我曾经遇到过这样的情况：我需要将

datepicker

功能添加到通过AJAX调用随机添加到DOM的输入字段中，并且我无法修改进行AJAX调用的脚本以附加

datepicker

功能，所以我选择了新的

功能及其委派功能：

// 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", ".my_input_element", function(){

        // as an added bonus, if you are afraid of attaching the "datepicker"
        // multiple times, you can check for the "hasDatepicker" class...
        if (!$(this).hasClass("hasDatepicker"))
        {
            $(this).datepicker();
            $(this).datepicker("show");
        }
    });
});

我希望这对某人有所帮助，并感谢迄今为止所有的答案，这些答案使我找到了这个对我有效的解决方案！：）

我还有一个案子。 我的脚本正在复制最后一个表元素，包括datepicker

jquery将不工作，因为复制的元素具有标记“hasDatepicker”

要在新元素中激活datepicker，请删除该类名并初始化它，如下所示

$（“#yournewelementid”）.attr（“类”，“您的类名”）；

---

$（“#yournewelementid”）.datepicker（）

当您尝试初始化元素时，如果元素不存在，问题总是会发生。

当您使用$（function（）{/**some code**/}）时；元素必须存在于文档中，这意味着必须存在于html中，这样您就可以创建一个函数来初始化组件，或者在将组件添加到文档中后在成功事件中初始化组件。

在您尝试初始化文档之前，请先将ajax请求中的外部html加载添加到文档中，否则它将根本无法初始化。
例如：

$.ajax（{
url:“ajax_html.html”，
数据类型：“html”
}).done（函数（html）{
$（“#选择器”）.html（html）
init（）；
});

函数init（）{
$（“.birth”）.datepicker（{}）；

---

}

谢谢JK。使用.live（）解决了这个问题。我使用了$（'#birth'）.live（'focus'，function（）{$（this.datepicker（）；}），而不是您的示例@函数的作用是创建选择器，因此只需调用它一次。但我想每次在焦点上这样做并不会带来太大的伤害（但它的效率比它可能的要低）。如果我将“焦点”改为“加载”，它根本不起作用。此外，我还注意到，当我在datepicker中进行tab并在tab out中进行tab时（不选择任何值），我的AJAX/php脚本都无法工作？！？！我做错了什么？这里要指出的是，页面上当前元素以及以后创建的元素的live方法绑定，从而解决了以后添加元素时没有DtPicker的问题。然而，live方法现在被弃用，取而代之的是“on”，我别无选择，只能使用jquery 1.7，因为这是工作中的一项要求：（.但是，您上面显示的jQuery 1.7版本对我不起作用。：/所以，令人沮丧。@user919860-该函数已弃用，未被删除，因此据我所知，您仍然可以使用1.7中的

live（）

函数…jQuery网站上有关

live（）的文档）

函数非常好，您可以。他们还建议在较旧版本的jQuery中使用

delegate（）

函数，该函数的详细信息在文档的同一页上，但如果您仍在挣扎，请大声喊叫！：）

// 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", ".my_input_element", function(){

        // as an added bonus, if you are afraid of attaching the "datepicker"
        // multiple times, you can check for the "hasDatepicker" class...
        if (!$(this).hasClass("hasDatepicker"))
        {
            $(this).datepicker();
            $(this).datepicker("show");
        }
    });
});