10

入力を使用して新しい行を動的に作成できるフォームがあります。新しい各行の日付入力には、日付ピッカーが必要です。これはほとんど機能していますが、入力を含む新しい行が作成されると、すでに存在する日付フィールドで日付ピッカーが機能しなくなります。何が間違っているのかを見つけるために一日中プレイしましたが、これを修正する方法がわかりません。

ここにフィドルがあります-> http://jsfiddle.net/HermesTrismegistus/vdFaH

私のフォームは次のようになります。

<table id="productTable" class="table table-striped table-condensed">
     <thead>
        <tr>
         <th>Product</th>
         <th>Datum</th>
         <th>Tijd</th>
         <th>Minuten</th>
        </tr>
     </thead>
    <tbody>   
     <tr>
        <td><input id="products" class="input-medium" name="products[]" type="text" /></td>
        <td><input id="date" class="datepick input-mini" name="date[]" type="text" /></td>
        <td><input id="time" class="input-mini" name="time[]" type="text" /></td>
        <td><input id="minutes" class="input-mini" name="minutes[]" type="text" /></td>
        <td><a id="addnew" href=""><i class="icon-plus"></i></a></td>
      </tr>
    </tbody>
</table>

私が持っているjqueryは、次のようになります。

    $(function(){
        // start a counter for new row IDs
        // by setting it to the number
        // of existing rows
        $('.datepick').datepicker();

        var newRowNum = 0;

        // bind a click event to the "Add" link
        $('#addnew').click(function(){
            // increment the counter
            newRowNum = $(productTable).children('tbody').children('tr').length +1;

            // get the entire "Add" row --
            // "this" refers to the clicked element
            // and "parent" moves the selection up
            // to the parent node in the DOM
            var addRow = $(this).parent().parent();

            // copy the entire row from the DOM
            // with "clone"
            var newRow = addRow.clone();

            // set the values of the inputs
            // in the "Add" row to empty strings
            $('input', addRow).val('');

            // insert a remove link in the last cell
            $('td:last-child', newRow).html('<a href="" class="remove"><i class="icon-minus"><\/i><\/a>');

            // insert the new row into the table
            // "before" the Add row
            addRow.before(newRow);

            // add the remove function to the new row
            $('a.remove', newRow).click(function(){
                $(this).closest('tr').remove();
                return false;               
            });

            $('#date', newRow).each(function(i){
                var newID = 'date_' + i;
                $(this).attr('id',newID);
            });

            // prevent the default click
            return false;
        });
4

5 に答える 5

14

これを試してください。行を追加するときは、すべての日付ピッカー インスタンスを破棄し、新しい行を追加した後に日付ピッカーを再バインドします。

jsFiddle の例

于 2012-08-23T14:53:17.073 に答える
2

私の場合、clone()datepicker のコピーを作成するために使用します。

$(".cloneDiv").clone().appendTo("#copyHolder");

次に、datepicker が入力要素に追加した「class」と「id」を削除します。

$(".hasDatepicker").removeClass("hasDatepicker").removeAttr("id");

注: 入力要素は複製されるため、"id" 属性は指定しません。したがって、datepicker は自動的に「id」を DOM 要素に追加します。さらに、複製される要素にユーザーが割り当てた「id」がある場合、つまり同じ「id」を共有する要素が少なくとも 2 つある場合、datepicker で正しい要素を見つけるのに問題が発生します。例は @ j08691 の回答にあります。

最後に、datepicker を入力要素に再バインドします。

$(".inputDate").datepicker();

クラス「inputDate」を持つすべての入力要素には、日付ピッカーがあります。

于 2014-01-08T18:20:51.677 に答える
1 
This is ur Answer I have done it......

 $(function(){
        // start a counter for new row IDs
        // by setting it to the number
        // of existing rows
        $('.datepick').datepicker();

        var newRowNum = 0;

        // bind a click event to the "Add" link
        $('#addnew').click(function(){
            // increment the counter
            newRowNum = $(productTable).children('tbody').children('tr').length +1;

            // get the entire "Add" row --
            // "this" refers to the clicked element
            // and "parent" moves the selection up
            // to the parent node in the DOM
            var addRow = $(this).parent().parent();

            // copy the entire row from the DOM
            // with "clone"
            var newRow = addRow.clone();

            // set the values of the inputs
            // in the "Add" row to empty strings
            $('input', addRow).val('');

            // insert a remove link in the last cell
            $('td:last-child', newRow).html('<a href="" class="remove"><i class="icon-minus"><\/i><\/a>');

            // insert the new row into the table
            // "before" the Add row
            addRow.before(newRow);

            // add the remove function to the new row
            $('a.remove', newRow).click(function(){
                $(this).closest('tr').remove();
                return false;               
            });

            $('#date', newRow).each(function(i){
              var newID = 'date_' + newRowNum;
           $(this).attr('id', newID).removeClass('hasDatepicker')
                  .removeData('datepicker')
                  .unbind()
                  .datepicker();
                 i++;
            });

            // prevent the default click
            return false;
        });
于 2015-03-25T10:47:40.703 に答える
0

Chrome コンソールに表示される JavaScript エラーがあります。

Uncaught TypeError: Cannot read property 'inline' of undefined

これはおそらく、datepicker 機能をシャットダウンしています。

于 2012-08-23T14:46:45.570 に答える