jQuery的日期选择器不会在AJAX添加HTML元素的工作 [英] jQuery datepicker won't work on a AJAX added html element

问题描述

我有一个jQuery绑定到生日输入HTML元素日期选择器功能，写在网页标题：

I have a jQuery datepicker function bound to the "birthday" input html element, written in the page header:

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

接下来，我有一些AJAX功能 - 它增加了新的输入HTML元素的网页。该元素是：

Next, I have some AJAX functionality - it adds new input html element to the page. That element is:

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

点击上的生日的元素不会弹出日期选取器下方的文本字段。我预期这一点，因为该元素被添加加载页面之后，因此它是不与在报头中提供的功能关系。

Clicking on that birthday element does not pop up the date picker below the text field. I expected this, as the element is added after the page is loaded, thus it isn't in relation with the function provided in the header.

我怎样才能使它发挥作用？我试图从身体的头动了剧本，但似乎没有任何工作。谢谢。

How can I make it work? I tried moving the script from the header to the body, but nothing seems to work. Thanks.

P.S。如果我创建了页面主体的id =生日，如预期everythig工作输入html元素。看来，只有通过AJAX添加的元素是不正常的。

P.S. If I create an input html element with id="birthday" in the page body, everythig works as expected. It appears that only the elements added through AJAX are dysfunctional.

推荐答案

我有点迟到了，但为了彻底性 - 以及与 .live（）功能处于德$ P从jQuery的1.7 pcated $开始 - 我想我会根据我的经验，提供了一个更新的解决方案，和所有帮助我从计算器其他答案了！

I'm a bit late to the party, but for thoroughness - and with the .live() function being deprecated from jQuery 1.7 onwards - I thought I'd provide an updated solution based on my experiences, and from all the help I got from other answers on StackOverflow!

我有一个情况我需要添加日期选择器的功能，正在加入到通过AJAX的DOM输入字段要求随意，我不能修改使得AJAX脚本调用以附加日期选择器的功能，所以我选择了新的闪亮。对（）功能其代表团的特点：

I had a situation where I needed to add the datepicker functionality to input fields that were being added to the DOM through AJAX calls at random, and I couldn't modify the script making the AJAX calls to attach the datepicker functionality, so I opted for the new shiny .on() function with its delegation features:

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

我希望这可以帮助别人，并感谢所有的答案到目前为止，这使我这个解决方案，为我工作！ ：）

I hope this helps someone, and thanks for all the answers so far that led me to this solution that worked for me! :)

这篇关于jQuery的日期选择器不会在AJAX添加HTML元素的工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！