jquery datepicker没有处理创建的元素

时间:2013-09-26 21:43:37

标签: javascript jquery jquery-ui datepicker

我有非常简单的日期选择器设置:

这在<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" media="screen,projection,tv" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
    $(function() {
        $('input.date').datepicker();

        $('button').on('click', function() {
            $('#orig').clone()
                .attr('id', 'else')
                .datepicker()
                .appendTo('body');
        });
    });
</script>

这在<body>

<input type="date" id="orig" class="date">
<button>duplicate</button>

当克隆输入时,没有初始化datepicker。见http://jsfiddle.net/aMPB2/

它出了什么问题?

1 个答案:

答案 0 :(得分:8)

datepicker向元素添加标记类“hasDatepicker”。您必须将其从克隆中删除:

Updated Fiddle

$(function() {
    $('input.date').datepicker();

    $('button').on('click', function() {
        var x = $('#orig').clone()
        .attr('id', 'else')
        .removeClass("hasDatepicker")    // <=== New line
        .appendTo('body')
        .datepicker();
    });
});