Question

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

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

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

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

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

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

P.S。如果我在页面主体中创建id =“birthday”的输入html元素，则everythig按预期工作。似乎只有通过AJAX添加的元素功能失调。

Answer 1

我参加派对有点晚了，但是为了彻底 - 并且.live()函数正在deprecated from jQuery 1.7以后 - 我想我会根据自己的经验提供更新的解决方案，并且我从StackOverflow上的其他答案得到的所有帮助！

我遇到的情况是我需要将datepicker功能添加到通过随机AJAX调用添加到DOM的输入字段中，我无法修改脚本，使AJAX调用附加到datepicker功能，因此我选择了具有委派功能的新闪亮.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");
        }
    });
});

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

Answer 2

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

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

修改

.live() documentation说，它有点过时了。使用新版本的jquery（1.7+）时，请使用.on()。

Answer 3

鲍里斯，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 );
  }
});
});

Answer 4

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

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

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

$（ “＃yournewelementid”）ATTR（ “类”， “你的类名”）。 $（ “＃yournewelementid”）日期选择器（）。

Answer 5

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

当你使用 $（function（）{ / **某些代码** / }）; 元素必须在文档上存在时，这意味着必须在html上因此，您可以创建一个函数来初始化组件，或者在将成功事件添加到文档后将其初始化为成功事件。

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

$。AJAX（{
网址： “ajax_html.html”，
数据类型： “HTML”
}）。完成（功能（HTML）{
$（ “＃选择”）。HTML（HTML）
的init（）;
}）;

function init（）{
$（ “生日”。）日期选择器（{}）;
}

Answer 6

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

 $.ajax({

    ...

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

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

6 个答案: