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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,217

kans00229

score 25

【使用環境】
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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • date

    2016/09/29 10:52

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

    キャンセル

回答 1

checkベストアンサー

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/04 15:27

    kei344さん ご回答ありがとうございました。
    全体をお伝えせずに申し訳ございせん。
    該当部分のソースを追記させて頂きました。

    お教え頂きました、ソースでclockpickerは無事に動作
    しました。

    フォーム部分については、cloneで複製して、closestで
    削除する動きを実装しております。

    そこで、clone.clone(true)をclone.clone()に変更したとき
    にフォームの削除が出来なくなってしまいました。

    この部分につきましても、お知恵をお貸し頂けないでしょうか。
    二度手間になりましてすみません。

    宜しくお願い致します。

    キャンセル

  • 2016/10/05 01:58

    clone.clone() はクローン元のイベントを引き継がないため、削除用のイベントも上手く適用されないのかもしれませんね。

    $('.panels').on('click', '.btn_delete_btn', function(){}); とされていますが、増えたり消えたりする要素('.panels')にonするのではなく、その上位の要素(最悪body要素とか)に割り当ててみてはいかがでしょうか。

    キャンセル

  • 2016/10/05 11:00

    kei344さん ご回答有難うございます。
    一つ上位の要素に割り当てた結果、無事に動作しました。

    丁寧に教えて頂き、本当にありがとうございます。
    また、機械がありましたら、ご教授頂ければ幸いです。

    本当に有難うございました。

    キャンセル

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

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる