Bootstrap добавление дополнительного поля

Question

Я пытаюсь получить дополнительное поле «Сообщение» при нажатии кнопки «Добавить», но по какой-то причине он не работает. Я хочу, чтобы в появившемся окне сообщения появилось новое поле «сообщение». Включая кнопку add en remove.

Я уже прочитал все связанные темы на этом сайте, но до сих пор не могу понять.

Нужно ли положить поле «сообщение» в дополнительной форме? Или я принимаю неправильный «класс» в 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 и выберите их, используя input вместо button.

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).

---

EDIT:

вы используете apendTo('body') который добавит его к концу тела. Вместо этого используйте insertAfter, который добавит его сразу после элемента. Этот код будет добавлен элемент клон только после того, как исходного элемента:

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

EDIT 2:

вновь добавленных элементов не будут иметь прослушиватель события приписываются (или они не будут иметь их приложенный должным образом). Таким образом, вместо крепления событий непосредственно к кнопкам использовать делегирование событий, как это:

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

это две линии должны заменить предыдущие две линии (в JAVASCRIPT: раздел выше). Делегирование событий не присоединяет слушателей событий непосредственно к элементу, но вместо этого оно присоединяет их к другому элементу (первый параметр: document), поэтому всякий раз, когда этот элемент будет нажат, он будет смотреть, соответствует ли целевой элемент селектору (второй параметр), если match затем выполняет функцию (третий параметр).Раньше слушатели событий были напрямую привязаны к уже существующим кнопкам, поэтому новые должны повторно прикреплять их каждый раз, когда они создаются, но это не удобно, поэтому мы используем делегирование для делегирования этого прослушивателя событий на известный элемент, который будет прослушивать событие, а затем проверить, соответствует ли целевой элемент указанному селектору, какой элемент был добавлен (клон) или нет (оригинал).