jQueryクローンtablerowとdatepickerを追加

Question

jQueryとJSの両方に関する私の非常に限られた知識で、ボタンをクリックするとtablerowを複製する小さなスクリプト（Nicola Peluchettiの助けを借りて）を作った。これは魅力のように動作しますが、私はそれにdatepickerを追加したいと思います。これもうまくいきますが、コピーされたフィールドやその逆では一度だけです。おそらく、日付ピッカーがただ1つのフィールドしかないと「考える」ためです。

私はこの問題を解決するためにいくつかの情報源を見つけましたが、やはり初心者の知識では難しいことです。私はこれで約2日間遊んでおり、解決することはできません。私は得ることはありません

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$("input[type='button'].AddRow").click(

function() { 
var index = $(this).closest('tr').index(); 
if (index > 0) { 
$(this).closest('tr').remove(); 
} else { 
$(this).closest('tr').clone(true).prependTo($(this).closest('table')); 
$(this).val(i++); 
/* $('.startdatum').removeClass('hasDatepicker').datepicker({dateFormat: 'mm-dd-yy'}); */ 
} 

}); 
});//]]> 
</script> 

HTML

<table width="960" border="0" align="center" cellpadding="10" cellspacing="0"  class="contentblock"> 
<tr> 
<td width="140"><strong>Startdatum</strong></td> 
<td><input name="startdatum[]" type="text" class="startdatum" value="dd/mm/jjjj" /> 
<script> 
$(function() { 
    $('.startdatum').removeClass('hasDatepicker').datepicker({ 
dateFormat: 'mm-dd-yy' 
}); 
}); 
</script> 
    <select name="locatie[]" id="locatie[]"> 
    <option value="" selected></option> 
    </select></td> 
    <td width="143"><strong>Dekking</strong></td> 
    <td width="133"><select name="dekking[]" id="dekking[]"> 
    <option value="" selected></option> 
    </select></td> 
    <td width="145"><input type="Button" value="Add Row" class="AddRow"></td> 
    </tr> 
    </table> 

可能な解決策：

• http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/
• duplicating jQuery datepicker
• Dynamic JQuery date picker code

Datepickerplugin：

• http://jqueryui.com/demos/datepicker/

は、誰も私を助けてくださいもらえますか？

Answer 1

解決策の1つは、日付ピッカーを破棄し、別のIDを追加した後に再作成することです。私は少しあなたのコードを変更：ここ

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all"> 
<table width="960" border="0" align="center" cellpadding="10" cellspacing="0"  class="contentblock"> 
<tr> 
<td width="140"><strong>Startdatum</strong></td> 
<td><input id='datePicker' name="startdatum[]" type="text" class="startdatum" value="dd/mm/jjjj" /> 
    <select name="locatie[]" id="locatie[]"> 
    <option value="" selected></option> 
    </select></td> 
    <td width="143"><strong>Dekking</strong></td> 
    <td width="133"><select name="dekking[]" id="dekking[]"> 
    <option value="" selected></option> 
    </select></td> 
    <td width="145"><input type="Button" value="Add Row" class="AddRow"></td> 
    </tr> 
    </table> 

<input type="hidden" value="0" id="counter"> 

$('.startdatum').removeClass('hasDatepicker').datepicker({ 
    dateFormat: 'mm-dd-yy' 
}); 


$("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(); 
     var id = 'datepicker' + index; 
     index++; 
     $('input#counter').val(index); 
     $input.attr('id', id).data('index', index); 
     console.log(index); 
     $tr.prependTo($(this).closest('table')); 
     $('.startdatum').each(function() { 
      $(this).datepicker('destroy'); 
      $(this).datepicker({ 
       dateFormat: 'mm-dd-yy' 
      }); 
     }); 

    } 

}); 

フィドルhttp://jsfiddle.net/nicolapeluchetti/87QCx/1/

編集 - あなたが他のすべての後に行を添付する必要がある場合：あなたは

 $(this).closest('table').append($tr); 

で

 $tr.prependTo($(this).closest('table')); 

を変更する必要があります

Answer 2

これは少し遅れているかもしれませんが、上記の提案はすべて私のためにはうまくいきませんでした。このための簡単な解決策です。

まず、問題の原因： JQueryがdatepickerを要素idに割り当てます。もしあなたが要素をクローンしていれば、同じIDも同様にクローン化されるかもしれません。どのjQueryは好きではありません。ヌル参照エラーまたは最初の入力フィールドに割り当てられている日付を受け取ると、クリックした入力フィールドに関係なく終了することがあります。

ソリューション：

1）日付ピッカー 2を破壊する）すべての入力フィールド 3に新しい固有のIDを割り当てる）あなたの入力は、この

<input type="text" name="ndate[]" id="date1" class="n1datepicker"> 

のようなものであることを確認し、各入力

のための日付ピッカーを割り当てます

クローンする前に、日付ピッカーを破棄する

$('.n1datepicker').datepicker('destroy'); 

クローンを作成した後、同様

var i = 0; 
$('.n1datepicker').each(function() { 
    $(this).attr("id",'date' + i).datepicker(); 
    i++; 
}); 

をこれらの行を追加し、魔法が