jQuery datepicker 不适用于动态 HTML答案

【问题标题】：jQuery datepicker not working on dynamic HTMLjQuery datepicker 不适用于动态 HTML
【发布时间】：2015-08-02 19:13:29
【问题描述】：

我问过这个问题before 和here。但是，建议的答案都没有奏效。几天后，问题仍然没有解决。因此我再次询问，并提供更多细节，看看是否有人可以帮助我解决它。

我有一个通过 Ajax 从服务器端生成并插入到当前页面的输入字段。我的问题是：jQuery 日期选择器在通过 Ajax 生成时对输入字段不起作用，但当字段直接放在页面中时它起作用。

下面，我包含了我的代码的缩小版本。

HTML 代码：

<form id="user-form"></form>

这里是用来激活日期选择器的 jQuery 代码。

$.ajax({
   type: "GET",
   url: "/inputfield-loader.php" ,
   success: function(data) {
      $('#user-form').html(data);
      $("#datefield").datepicker();
   } 
});

这里是 inputfield-loader.php

<input type="text" name="firstname" id="firstname"></div>
<div><input type="text" name="email" id="email"></div>
<div><input type="text" name="birthdate" id="datefield"></div>
<div><input type="submit"></div>

如果输入字段只是硬编码到页面中，则一切正常。但是当作为 Ajax 调用的返回字符串插入 DOM 时，日期选择器不再起作用。但是，当我使用 Chrome 检查 datefield 字段时，我看到它已将 jQuery datepicker 类 hasDatepicker 添加到其中，表明对 jQuery.datepicker() 方法的调用有效。但是在点击该字段时，我没有看到日期选择器弹出。

根据@dfsq 的建议，这里是小提琴。它更接近原始代码：http://jsfiddle.net/35kgsjxk/

【问题讨论】：

听起来可能是事件委托问题，请查看learn.jquery.com/events/event-delegation 尝试先输出datefield 字段，然后应用日期选择器。
您的代码很好，日期选择器可以工作。这很可能是样式问题。但是，除非您用自己的风格复制问题，否则无法为您提供帮助。否则谁也猜不透原因。
我使用了示例 html echo，代码有效 jsfiddle.net/NF2jz/4940 。使用 .html() 追加后，您在 console.log($("#datefield")) 中看到了什么
我同意 dfsq。此外，您的文件 inputfield-loader.php 缺少其前导 div 标记。
@dfsq，正是我的想法。但是，我似乎无法弄清楚是什么风格导致了这个问题。根据复制问题，页面有很多代码，你知道它是怎么回事，在单独的文件中定义的常量，函数等，几乎不可能在这里复制整个东西。我只将日期选择器代码的主要元素放在问题中。

标签： javascript php jquery ajax datepicker

【解决方案1】：

您的inputfield-loader.php 文件中缺少打开div 标记，这可能会导致隐藏某些元素的问题。

如果您在 $.ajax 中使用正确的标题和数据类型，它应该可以正常工作：http://jsfiddle.net/96d8k2m3/

【讨论】：

【解决方案2】：

我也面临同样的问题。我将其修复为，

$(document).bind('click','#datefield',function(){
    $('#datefield').datepicker();
})

【讨论】：