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中，然后使用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，它将在元素之后添加它。此代码将在原始元素之后添加clone元素：

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

编辑2：

新添加的元素不会触及事件监听器（或者他们不会正确连接它们）。因此，不要将事件直接附加到按钮，而是使用这样的事件委托：

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

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

Bootstrap添加额外字段

1 个答案: