【使用環境】
PHPバージョン5.6
phpMyAdminバージョン情報: 4.5.1
XAMPPにてローカル環境
現在入力フォームを作成しています。その際にjquery(afterとclone)を利用して
動的にフォームを複製しています。
動的に複製するフォームの中に、「bootstrap-clockpicker」を利用した
時間入力フォームを設置していますが、複製したフォームでうまく動きません。
複製したフォームで入力しようとすると、一つ目のフォームの
「bootstrap-clockpicker」が動きます。
同じフォームの中で「datepicker」も使用していて、そちらは
動的フォームの中でも動かすことが出来ています。
下記のソースも記述しましたが、「datepicker」と同じようにクラスを
removeしてもう一度「bootstrap-clockpicker」を読み込ませる方法も
試しましたが、うまく動きませんでした。
「bootstrap-clockpicker」を動的に利用するには、どのようにしたら
宜しいでしょうか。ご助言お願いします。
他に、動的に利用でき、実装が簡単なjquery等がございましたら
お教え頂けたら幸いです。
初心者ですので、わからないことが多く、質問ばかりとなりますが宜しくお願い致します。
//jquery 部分 datepickerについては下記の記述で複製したフォームでも動きました。 var clone = $('.panels:last'); $('.panelsadd').on('click', '.add_btn', function(){ $('.panels:last').after(clone.clone(true)); $('.panels:last input.datepicker') .removeClass('hasDatepicker') .datepicker({ defaultDate: new Date(), dateFormat: "yy/mm/d"}); $(".btn_delete_btn:not(:first)").show(); //追加したフォームを削除する $('.panels').on('click', '.btn_delete_btn', function(){ $(this).closest(".panel").remove(); $("#addcnt").val(Number($("#addcnt").val()-1)); }); //clockpicker部分 $(function() { $('.clockpicker').clockpicker(); });
//html 部分 <div class="panelsadd""> <button type="button" class="btn btn-default add_btn" name="add_btn">追加する</button> //フォームの個数をカウント <input type="text" name="cnt" id="addcnt" value="<?php echo $cnt ;?>"> </div> <div class="panel panel-default panels"> <div class="panel-body"> <div class="form-group"> //フォームを減らすボタン <div class="col-sm-12 text-right"> <button type="button" class="btn btn-default btn_delete_btn" style="display:none;" name="btn_delete_btn">フォームを削除する</button> </div> <label>時間</label> <div> <input type="text" class="form-control clockpicker" name="time[]"> </div> </div> <div class="date_box"> <label>日程</label> <div> <input class="datepicker dateadd" type="text" name="mt_date[]"> </div> </div> </div> </div>
回答1件
あなたの回答
tips
プレビュー