jQuery datepicker 不适用于 AJAX 添加的 html 元素答案

【问题标题】：jQuery datepicker won't work on a AJAX added html elementjQuery datepicker 不适用于 AJAX 添加的 html 元素
【发布时间】：2011-06-16 07:33:26
【问题描述】：

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

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

接下来，我有一些 AJAX 功能——它将新的输入 html 元素添加到页面。该元素是：

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

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

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

附：如果我在页面正文中创建一个 id="birthday" 的输入 html 元素，那么一切都会按预期工作。似乎只有通过 AJAX 添加的元素功能失调。

【问题讨论】：

标签： html ajax jquery

【解决方案1】：

我参加聚会有点晚了，但为了彻底 - 并且 .live() 函数从 deprecated from jQuery 1.7 开始 - 我想我会根据我的经验提供一个更新的解决方案，并在所有帮助下我从 StackOverflow 上的其他答案中获得！

我遇到了一种情况，我需要将 datepicker 功能添加到通过 AJAX 调用随机添加到 DOM 的输入字段中，并且我无法修改进行 AJAX 调用以附加 @987654325 的脚本@ 功能，所以我选择了新的闪亮的.on() 功能及其委托功能：

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

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

【讨论】：

我别无选择，只能使用 jquery 1.7，因为这是工作要求。 :'(。但是，您在上面显示的 jQuery 1.7 版本对我不起作用。：/。所以，令人沮丧。
@user919860 - 该功能已弃用，未删除，因此据我所知，您仍然可以在 1.7 中使用 live() 功能......jQuery 网站上关于 @ 的文档987654329@功能真不错，可以check it out here。他们还建议使用 delegate() 函数来与旧版本的 jQuery 一起使用，该函数的详细信息在文档的同一页上，但如果你还在苦苦挣扎，请大声喊叫！ :)

【解决方案2】：

您需要使用 .live() 以便任何新添加的元素都附加事件处理程序：http://api.jquery.com/live/

$('#birthday').bind('load', function() {
    $(this).datepicker();
});

编辑

.live() documentation 表示，它有点过时了。使用新版本的 jquery (1.7+) 使用 .on()。

【讨论】：

谢谢 JK。使用 .live() 解决了这个问题。我没有使用您的示例，而是使用了 $('#birthday').live('focus', function() { $(this).datepicker(); });
@Boris .datepicker() 函数创建选择器，因此您只需调用一次。但我想每次集中注意力都这样做并不会造成太大的伤害（但它的效率低于预期）。
如果我将“焦点”更改为“加载”，它根本不起作用。另外，我注意到，当我在 datepicker 和 tab out（不选择任何值）中进行选项卡时，我的 AJAX/php 脚本都不起作用。？！？！我做错了什么？

【解决方案3】：

Boris, JK：这对我很有帮助。我还发现，如果您想使用 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方法绑定，从而解决了后期添加元素没有DtPicker的问题。但是，live 方法现在已被弃用，取而代之的是 'on'

【解决方案4】：

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

jquery 将无法工作，因为复制的元素已标记为“hasDatepicker”。

要在新元素中激活日期选择器，请删除该类名并启动它，如下所示。

$("#yournewelementid").attr("class","your-class-name"); $("#yournewelementid").datepicker();

【讨论】：

【解决方案5】：

当您尝试对其进行初始化时元素不存在时，您的问题总是会发生。

当您使用 $(function(){/** some code **/}); 元素必须存在于文档上时，这意味着必须在 html因此您可以创建一个函数来初始化组件，或者在将其添加到文档后在成功事件上对其进行初始化。

在尝试初始化文档之前，首先将 ajax 请求中的外部 html 加载添加到文档中很重要，否则它根本不会被初始化。
示例：

$.ajax({
网址：“ajax_html.html”，
数据类型：“html”
}).done(函数(html){
$("#selector").html(html)
初始化();
});

函数初始化(){
$(".birthday").datepicker({});
}

【讨论】：

【解决方案6】：

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

 $.ajax({

    ...

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

【讨论】：