追加された行にカレンダーを表示

Question

私は新しい行を追加するたびに新しい行を表示するテーブルを持っています。最初の行には、カレンダーイメージをクリックするたびにカレンダーボックスを表示する入力フィールドの横にカレンダーイメージが表示されます。問題は次のとおりです。「新しい行を追加」をクリックした後、カレンダーイメージが表示されますが、それをクリックするとと表示されます。。 追加をクリックした後に表示される行のカレンダーボックスを表示するにはどうすればよいですか？

$(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. 次のコードをonにして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>