質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2617閲覧

jqueryを利用して、フォーム複製した時のイベント生成について

kans00229

総合スコア28

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/09/29 01:48

編集2016/10/04 06:04

【使用環境】
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

date

2016/09/29 01:52

scriptの部分は全て出した方が回答が付きます。 余談ですが、MySQLバージョン情報: 4.5.1 なんてのがまだ存在するのでしょうか?
guest

回答1

0

ベストアンサー

全体がわからないので勘ですが、フォームの複製後に下記のようにしてみてはいかがでしょうか。

JavaScript

1$( '.clockpicker' ).clockpicker( 'remove' ).clockpicker(); // 一度削除してから再登録する

【ClockPicker】
https://weareoutman.github.io/clockpicker/

投稿2016/10/03 16:17

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kans00229

2016/10/04 01:10

kei344さんにお伝え頂いた方法を試させて頂きました。 $( '.clockpicker' ).clockpicker( 'remove' ).clockpicker();を「追加する」のボタンのクリックイベントに追記したところ ・複製する前(最初から表示されているフォーム)はclockpickerは動作 ・複製したフォームは、clockpickerが動作しませんでした。 ・「追加する」を2回押した(フォーム合計3個)ときは、3個目のフォームで だけclockpickerが動作、四回目以降は同じ現象。 ※追記する前は、複製する前(最初から表示されているフォーム)のclockpickerのみ動作しました。 removeClass('clockpicker') addClass('clockpicker' + i); $('clockpicker' + i).clockpicker(); などで、Classを削除して別のクラス名でclockpickerを動作させようとしましたが、複製する前(最初から表示されているフォーム)のclockpickerのみ動作しました。 Datepickerは読み込み時に「hasDatepicker」というクラスを追記しているようなので、 そちらをremoveClassして、datepickerを再度読み込ませる方法で、動作しましたが、clockpickerは同じ方法では動作しませんでした。 解りにくいご説明で申し訳ございません。 お知恵をお貸し頂ければと思います。 宜しくお願い致します。
kei344

2016/10/04 02:45

<div class="panelsadd""> ← 「"」が多い 上記のようなHTMLのそもそもの構文ミスなどはありませんか?「全体がわからない」というのはこういう点も含みます。構文エラーがある状態で正確に要素をコピーできるかはわかりません(ブラウザ次第)。 × clone.clone(true) ○ clone.clone() https://jsfiddle.net/8ej9xrnm/
kans00229

2016/10/04 06:27

kei344さん ご回答ありがとうございました。 全体をお伝えせずに申し訳ございせん。 該当部分のソースを追記させて頂きました。 お教え頂きました、ソースでclockpickerは無事に動作 しました。 フォーム部分については、cloneで複製して、closestで 削除する動きを実装しております。 そこで、clone.clone(true)をclone.clone()に変更したとき にフォームの削除が出来なくなってしまいました。 この部分につきましても、お知恵をお貸し頂けないでしょうか。 二度手間になりましてすみません。 宜しくお願い致します。
kei344

2016/10/04 16:58

clone.clone() はクローン元のイベントを引き継がないため、削除用のイベントも上手く適用されないのかもしれませんね。 $('.panels').on('click', '.btn_delete_btn', function(){}); とされていますが、増えたり消えたりする要素('.panels')にonするのではなく、その上位の要素(最悪body要素とか)に割り当ててみてはいかがでしょうか。
kans00229

2016/10/05 02:00

kei344さん ご回答有難うございます。 一つ上位の要素に割り当てた結果、無事に動作しました。 丁寧に教えて頂き、本当にありがとうございます。 また、機械がありましたら、ご教授頂ければ幸いです。 本当に有難うございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問