在添加的行中显示日历

Question

我有一张表格，每次单击ADD NEW时都会显示新行。每当我们点击日历图像时，第一行的日历图像旁边会显示日历框。问题是：在我们点击添加新行后，日历图像显示，但当我们点击它时，日历框不显示。 如何显示点击ADD NEW后显示的行的日历框？

$(function() { 
     $("#datearrive").datepicker({ dateFormat: "dd-mm-yy", 
       showOn: "button", 
       buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
       buttonImageOnly: true, 
       buttonText: "Select date" 

     }).val() 

    $("#datearrive").click(function() { 

      date = new Date(); 
      date.setDate(date.getDate()-1); 
      $("#datearrive").datepicker("setDate" , date); 

    }); 

}); 
$(function() { 
     $("#datedepart").datepicker({ dateFormat: "dd-mm-yy", 
       showOn: "button", 
       buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
       buttonImageOnly: true, 
       buttonText: "Select date" 

     }).val() 

    $("#datedepart").click(function() { 

      date = new Date(); 
      date.setDate(date.getDate()-1); 
      $("#datedepart").datepicker("setDate" , date); 

    }); 

}); 
<table id="maintable"> 
     <tr> 
      <th align="center">Arrived Date</th> 
      <th align="center">Departed Date</th> 
      <th align="center">Last Name</th> 
     </tr> 
     <tr id="rows"> 
      <div style="padding-left: 5px"> 
       <td style="padding:5px;"> 
        <input type="text" name="rollno" id="datearrive" /> 
       </td> 
       <td style="padding:5px;"> 
        <input type="text" name="firstname" id="datedepart" /> 
       </td> 
       <td style="padding:5px;"> 
        <input type="text" name="lastname" /> 
       </td> 
      </div> 
     </tr> 
    </table> 
     <br> 
     <div id="add_new">ADD NEW</div> 
$("#add_new").click(function() { 

$("#maintable").each(function() { 

    var tds = '<tr>'; 
    jQuery.each($('tr:last td', this), function() { 
     tds += '<td>' + $(this).html() + '</td>'; 
    }); 
    tds += '</tr>'; 
    if ($('tbody', this).length > 0) { 
     $('tbody', this).append(tds); 
    } else { 
     $(this).append(tds); 
    } 
}); 

}）;

Answer 1

答案之前几点： -

1. 你产生行将具有相同的ID和我敢肯定你知道该ID是唯一的，所以首先将其更改为类;

2. 对于动态生成的元素，您必须将它们绑定到任何函数上才能使用它们。对这个调用使用jquery方法“on”。

3. 我已经写了下面的代码，并将id更改为类，日历将显示，但所有的值将相应的到达和离开日期相同，以克服这一点，我会建议生成ID在这里代码用类和“on”方法。

<script> 
$(function() { 
     $('body').on('focus',"input.datearrive", function(){ 
      $(".datearrive").datepicker({ dateFormat: "dd-mm-yy", 
       showOn: "button", 
       buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
       buttonImageOnly: true, 
       buttonText: "Select date" 

     }).val() 
     }); 


    $("body").on('click','input.datearrive',function() { 

      date = new Date(); 
      date.setDate(date.getDate()-1); 
      $(".datearrive").datepicker("setDate" , date); 

    }); 

}); 
$(function() { 
     $('body').on('focus',"input.datedepart", function(){ 
      $(".datedepart").datepicker({ dateFormat: "dd-mm-yy", 
        showOn: "button", 
        buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
       buttonImageOnly: true, 
       buttonText: "Select date" 

      }).val() 
     }); 

    $("body").on('click','input.datedepart',function() { 

      date = new Date(); 
      date.setDate(date.getDate()-1); 
      $(".datedepart").datepicker("setDate" , date); 

    }); 

}); 
</script> 
<table id="maintable"> 
     <tr> 
      <th align="center">Arrived Date</th> 
      <th align="center">Departed Date</th> 
      <th align="center">Last Name</th> 
     </tr> 
     <tr id="rows"> 
      <div style="padding-left: 5px"> 
       <td style="padding:5px;"> 
        <input type="text" name="rollno" class="datearrive" /> 
       </td> 
       <td style="padding:5px;"> 
        <input type="text" name="firstname" class="datedepart" /> 
       </td> 
       <td style="padding:5px;"> 
        <input type="text" name="lastname" /> 
       </td> 
      </div> 
     </tr> 
    </table> 
     <br> 
     <div id="add_new">ADD NEW</div> 
     <script> 
$("#add_new").click(function() { 

$("#maintable").each(function() { 

    var tds = '<tr>'; 
    jQuery.each($('tr:last td', this), function() { 
     tds += '<td>' + $(this).html() + '</td>'; 
    }); 
    tds += '</tr>'; 
    if ($('tbody', this).length > 0) { 
     $('tbody', this).append(tds); 
    } else { 
     $(this).append(tds); 
    } 
}); 
}); 
</script>