javascript - Bootstrap 添加额外字段

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

它们不是按钮(它们是输入)，并且它们没有类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);

或者您可以使用更好的 ID(#clone 和 #remove)。

<小时/>

编辑:

您使用apendTo('body')将其添加到正文的末尾。相反，使用 insertAfter 会将其添加到元素后面。此代码将在原始元素之后添加克隆元素:

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

编辑2:

新添加的元素不会附加事件监听器(或者它们不会正确附加事件监听器)。因此，不要将事件直接附加到按钮，而是使用事件委托(delegate)，如下所示:

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

这两行应替换前两行(在上面的 JAVASCRIPT: 部分中)。事件委托(delegate)不会将事件监听器直接附加到某个元素，而是将它们附加到另一个元素(第一个参数:document)，因此每当单击该元素时，它都会查看目标是否元素匹配一个选择器(第二个参数)，如果匹配则执行该函数(第三个参数)。之前，事件监听器直接附加到已经存在的按钮，因此新按钮每次创建时都必须重新附加它们，但这并不方便，因此我们使用委托(delegate)将该事件监听器委托(delegate)给将监听的已知元素事件，然后检查目标元素是否与指定的选择器匹配，无论该元素是刚刚添加(克隆)还是未添加(原始)。