Question

我尝试在表格中添加和删除带日期选择器的行。默认情况下，日期选择器不起作用。但是我点击了添加行按钮，它已经工作了。我无法找到解决方案。

请参阅小提琴的位置。

<http://jsfiddle.net/MJGV2/>

Answer 1

你的日期选择器第一次没有工作，因为你没有在第一时间初始化datepicker

这是新的小提琴.. http://jsfiddle.net/MJGV2/2/

// intilize datepicker at document ready or load..
$(document).ready(function(){

        setdatepicker();

});

$("input[type='button'].AddRow").live('click',
function() {
    var index = $(this).closest('tr').index();
    if (index > 0) {
        $(this).closest('tr').remove();

    } else {


        var $tr = $(this).closest('tr').clone(true);
        var $input = $tr.find('input.startdatum');
        var index = $('input#counter').val();
         $('#test').val('Delete');
        var id = 'datepicker' + index;
        index++;

        $('input#counter').val(index);
        $input.attr('id', id).data('index', index);
        console.log(index);
        $tr.prependTo($(this).closest('table'));
      setdatepicker();

    }

});


function setdatepicker(){

  $('.startdatum').each(function() {
            $(this).datepicker('destroy');
            $(this).datepicker({
                dateFormat: 'mm-dd-yy'
            });
        });
}

Answer 2

您必须在DOMready上启用datepicker，

你可以这样做。

Fiddle

 $("input[type='button'].AddRow").live('click',
 function() {
var index = $(this).closest('tr').index();
if (index > 0) {
    $(this).closest('tr').remove();

} else {


    var $tr = $(this).closest('tr').clone(true);
    var $input = $tr.find('input.startdatum');
    var index = $('input#counter').val();
     $('#test').val('Delete');
    var id = 'datepicker' + index;
    index++;

    $('input#counter').val(index);
    $input.attr('id', id).data('index', index);
    console.log(index);
    $tr.prependTo($(this).closest('table'));
    enable_dp();

}

 });
enable_dp();
function enable_dp()
 {

  $('.startdatum').each(function() {
        $(this).datepicker('destroy');
        $(this).datepicker({
            dateFormat: 'mm-dd-yy'
        });
    });
 }

日期选择器不起作用

2 个答案: