克隆元素上的 jQuery 日期选择器 [英] jQuery datepicker on cloned elements

问题描述

我正在尝试将日期选择器控件应用于克隆的输入字段.我正在做的是找到我想克隆的表行，用 clone(false) 克隆它，然后用 .date 类调用每个输入 datepicker() 在他们身上.代码如下:

I'm trying to apply a datepicker control to cloned input fields. What I'm doing is finding the table row I want to clone, clone it with clone(false) and then for each input with a class .date call datepicker() on them. The code is as follows:

$('.repeat').bind('click', function() {
    var parentEl = $(this).parents('.root');
    var lastRow = jQuery.makeArray($(parentEl).find('.last'));
    var newRow = $(lastRow).clone(false);
    $(lastRow).removeClass('last');
    $(newRow).addClass('last');
    newRow.find('input').each(function() {
        this.name = this.name.replace(/[(d+)]/, function(str, p1) {
            return '[' + (parseInt(p1, 10) + 1) + ']';
        });
    }).end().insertAfter($(lastRow));

    newRow.find('.date').each(function() {  
        $(this).removeAttr('id');
        $('.date').datepicker({ dateFormat: 'dd-mm-yy', changeYear: true, yearRange: '1970:2010' });
    });
});

现在 $(this).datepicker() 和 $('.date').datepicker() 都无法将日期选择器控件附加到 input.date.

Now both $(this).datepicker() and $('.date').datepicker() fail to attach a datepicker control to input.date.

除了日期选择器位之外，上面的代码按预期工作.

The above code works as expected except for the datepicker bit.

有人有什么想法吗?！

推荐答案

如果您首先添加行(在应用日期选择器之前)并同时删除由日期选择器添加的类，则似乎有效.hasDatepicker.

Seems to work if you add the row first (before applying the datepicker) and also remove the class added by the datepicker .hasDatepicker.

$('.repeat').bind('click', function(){
        var parentEl = $(this).parents('.root');
        var lastRow = jQuery.makeArray($(parentEl).find('.last'));
        var newRow = $(lastRow).clone(false, false);
        $(lastRow).removeClass('last');
        $(newRow).addClass('last');
        $('.root').append(newRow); // added this

        newRow.find('.date').each(function() {
            $(this).removeAttr('id').removeClass('hasDatepicker'); // added the removeClass part.
            $('.date').datepicker({dateFormat: 'dd-mm-yy', changeYear: true, yearRange: '1970:2010'});
        });
});

演示:http://jsfiddle.net/gaby/LCfC2/

这篇关于克隆元素上的 jQuery 日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！