追加フィールドを追加するブートストラップ

Question

「追加」ボタンをクリックしたときに追加の「メッセージ」フィールドを取得しようとしていますが、何らかの理由でそれが機能しません。現在のメッセージボックスの下に新しい「メッセージ」ボックスが表示されます。追加削除ボタンを含む。

私はすでにこのサイトのすべての関連トピックを読んだことがありますが、まだ理解できません。

「メッセージ」フィールドを特別な形式にする必要がありますか？あるいは、私はjsスクリプトで間違った 'クラス'を取っていますか？

のindex.php

<div class="row"> 
    <div class="col-md-12"> 
     <div class="form-group2"> 
      <label for="form_message">Message *</label> 
      <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea> 
     <div class="help-block with-errors"></div> 
     <div class="action"> 
      <input type="button" name="clone" class="btn btn-success btn-file" value="Add"> 
      <input type="button" name="remove" class="btn btn-danger btn-file" value="Remove"> 
     </div> 
     </div> 
    </div> 
    <div class="col-lg-6 col-sm-6 col-12"> 
     <div class="input-group"> 
      <label class="input-group-btn"> 
       <span class="btn btn-default btn-send"> 
       Browse&hellip; 
       <input type="file" name="file" style="display: none;"> 
       </span> 
       </label> 
       <input type="text" class="form-control" readonly> 
     </div> 
    </div> 
    <div class="col-md-12"> 
     <input type="submit" class="btn btn-success btn-send" value="Send message"> 
    </div> 
</div> 
    <div class="row"> 
     <div class="col-md-12"> 
      <p class="text-muted"><strong>*</strong> These fields are required.</p> 
     </div> 
     </div> 
    </div> 

</form> 

</div><!-- /.8 --> 

</div> <!-- /.row--> 

</div> <!-- /.container--> 

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="validator.js"></script> 
<script src="document.js"></script> 
<script src="extra.js"></script> 

extra.js

var regex = /^(.+?)(\d+)$/i; 
var cloneIndex = $(".form-group2").length; 

function clone(){ 
    $(this).parents(".form-group2").clone() 
     .appendTo("body") 
     .attr("id", "form-group2" + cloneIndex) 
     .find("*") 
     .each(function() { 
      var id = this.id || ""; 
      var match = id.match(regex) || []; 
      if (match.length == 3) { 
       this.id = match[1] + (cloneIndex); 
      } 
     }) 
     .on('click', 'button.clone', clone) 
     .on('click', 'button.remove', remove); 
    cloneIndex++; 
} 
function remove(){ 
    $(this).parents(".form-group2").remove(); 
} 
$("button.clone").on("click", clone); 

$("button.remove").on("click", remove); 

Answer 1

彼らはbuttonじゃない（彼らはinputだ）と、彼らが持っていませんクラスcloneおよびremoveが添付されています。したがって、HTMLにクラスを追加し、buttonの代わりにinputを使用してクラスを選択します。

HTML：（予告class="... clone"とclass="... remove"）

<input type="button" name="clone" class="btn btn-success btn-file clone" value="Add"> 
<input type="button" name="remove" class="btn btn-danger btn-file remove" value="Remove"> 

JAVASCRIPT：

$("input.clone").on("click", clone); 
$("input.remove").on("click", remove); 

それとも、より良い（#cloneと#remove）でIDを使用することができます。

---

EDIT：本文の最後に追加されますあなたはapendTo('body')使用

。代わりに、要素の直後に追加するinsertAfterを使用してください。このコードは、単に元の要素の後にクローン要素を追加します。

function clone(){ 
    var elem = $(this).parents(".form-group2"); 
    elem.clone() 
     .insertAfter(elem) 
     .attr("id", "form-group2" + cloneIndex) 
    //... 

EDIT 2：

新しく追加された要素は、イベントリスナーがatachedありません（または、彼らはそれらが取り付けられていませんが正しく）。だからではなく、このようなイベントの委任を使用し、ボタンにイベントを直接取り付ける：

$(document).on("click", "input.clone", clone); 
$(document).on("click", "input.remove", remove); 

この2行を（：上記セクションJAVASCRIPT中）前の2行を置き換える必要があります。イベントの委任では、イベントリスナーは要素に直接アタッチされませんが、別の要素（最初のパラメータ：document）にアタッチします。その要素がクリックされると、ターゲット要素がセレクタに一致するかどうかを調べますパラメータ）、一致すれば関数（第3パラメータ）を実行します。以前は、イベントリスナーは既存のボタンに直接アタッチされていました。新しいリスナーは作成されるたびに再接続する必要がありましたが、これは便利ではないため、委譲を使用して、その要素が追加されたばかり（クローン）かどうか（元のもの）に関係なく、ターゲット要素が指定されたセレクタと一致するかどうかを確認します。