在添加的行中顯示日曆

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>