Question

我正在尝试动态添加行，但是日期选择器不是创建新行。它仅适用于第一行，但不适用于后续行。 PFB代码。：

var counter = 2;
    var limit = 100;
    $(function() 
            {
             $( ".datepicker" ).removeAttr('id').removeClass('hasDatepicker').datepicker({ dateFormat: 'ddMyy',  minDate: '0' , maxDate: '366'});
            });

    function addInput(count){
         if (counter == limit)  {
              alert("You have reached the limit of adding " + counter + " inputs");
         }
         else {
              $("#btn"+(count-1)).hide();
               //document.getElementById(divName).appendChild(newdiv);    
              $("#appendTag").append("<tr id='record"+count+"'><td><input type='text' name='fn[]'></td><td><input type='text' name='cab[]'></td><td><input type='text' name='sd[]' class='sd"+count+" datepicker'></td>"
                                        +"<td><input type='text' name='ed[]' class='ed"+count+" datepicker'></td><td><input type='text' name='brd[]' maxlength='3'></td><td><input type='text' name='off[]' maxlength='3'></td><td><input type='text' name='seats[]' maxlength='3'></td>"
                                          +"<td><input type='text' name='dow[]' maxlength='7'></td><td><input type='button' value='Add' id='btn"+count+"'  onClick='addInput("+(++count)+");'/></td><td><input type='button' value='x' id='cross"+count+"' onclick = 'Remove("+(count-1)+");'/></td></tr>");

                          $( ".sd"+count).datepicker({ dateFormat: 'ddMyy',  minDate: '0'});
                          $( ".ed"+count).datepicker({ dateFormat: 'ddMyy',  minDate: '0'});
              counter++;
         }
    }
    function Remove(count){
         $("table tbody").find('tr#'+'record'+count).each(function(){
                    counter--;
                    if(counter == 2){
                         $("#btn0").show();
                    } else
                    if($("#btn"+count).is(':visible')){
                     //$("#btn"+(count-1)).show();
                        for(i=(count-1);i>0;i--)
            {
                if ($("#btn"+i).length) {
                $("#btn"+i).show();
                 break;
               }
                        }
                    }  
                     $(this).remove();
            });
   }
-----------------------------------------------------------

<div id="dynamicInput">
            <table>
                <tr>&nbsp;
                </tr>
                <tr>&nbsp;
                </tr>
                <tr>
                    <td>Flight No</td>
                    <td>Class</td>
                    <td>Start Date</td>
                    <td>End Date</td>
                    <td>Origin</td>
                    <td>Destination</td>
                    <td>No Of Seats</td>
                    <td>Days Of Week</td>
                </tr>
                <tbody id="appendTag">
                    <tr id="record0">
                        <td><input type="text" name="fn[]" maxlength="6"></td>
                        <td><input type="text" name="cab[]" maxlength="1"></td>
                        <td><input type="text" name="sd[]" class="sd0 datepicker"></td>
                        <td><input type="text" name="ed[]" class="ed0 datepicker"></td>
                        <td><input type="text" name="brd[]" maxlength="3"></td>
                        <td><input type="text" name="off[]" maxlength="3"></td>
                        <td><input type="text" name="seats[]" maxlength="3"></td>
                        <td><input type="text" name="dow[]" maxlength="7"></td>
                        <td><input type="button" value="Add" id="btn0"
                            onClick="addInput(<%=++count%>);"></td>
                        <td><input type="button" value="x" id="cross0"
                            style="display: none;" /></td>
                    </tr>
                </tbody>
            </table>

        </div>

Answer 1

JS Fiddle

而不是这个

  $( ".sd"+count).datepicker({ dateFormat: 'ddMyy',  minDate: '0'});
  $( ".ed"+count).datepicker({ dateFormat: 'ddMyy',  minDate: '0'})

试试这个

   $( ".datepicker").datepicker({ dateFormat: 'ddMyy',  minDate: '0'});

Answer 2

问题出在这里

的onClick =＆＃39; addInput（＆＃34; +（++计数）+＆＃34）;＆＃39; /＆GT;

你在这里增加count的值，假设count在开头是1，现在count是2，在此之后当你尝试使用这个代码应用datepicker时：

       specificSizes = _.filter(sizeList.type, function (type) {
          return _.some(type, {'name': 'Medium', 'present':true})
        });

基本上你是在类.sd2和.ed2的元素上应用datepicker，它不存在。我希望澄清问题

试试这个：

$( ".sd"+count).datepicker({ dateFormat: 'ddMyy',  minDate: '0'});
$( ".ed"+count).datepicker({ dateFormat: 'ddMyy',  minDate: '0'});

动态添加行时，Datepicker不起作用

2 个答案: