Jquery 按钮不会在控制台上附加没有错误的元素

Question

我有这个 html 表单：

         <div class="col-sm-4 rounded" style="background-color: #D3D3D3">
          <div class="row clonedInput" id="clonedInput1">
          <div class="col-sm-6">
              <label for="diagnosis_data">Medication</label>
                <fieldset class="form-group">
                  <select class="form-control select" name="diagnosis_data" id="diagnosis_data">
                    <option value="choose">Select</option>
                  </select>
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <div class="col-sm-6">
              <label for="patient_weight">Quantity</label>
                <fieldset class="form-group">
                  <input type="number" class="form-control" name="patient_weight" id="patient_weight">
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <!-- End class="col-sm-6" -->
          </div>
          <div class="actions pull-right">
            <button class="btn btn-danger clone">Add More</button> 
            <button class="btn btn-danger remove">Remove</button>
          </div>

还有来自this link here的这个jQuery脚本：

<script>
  $(document).ready(function()
  {
    $("button.clone").on("click", clone);

    $("button.remove").on("click", remove);
  })
    var regex = /^(.+?)(\d+)$/i;
    var cloneIndex = $(".clonedInput").length;
    function clone(){
        $(this).parents(".clonedInput").clone()
            .appendTo(".rounded")
            .attr("id", "clonedInput" +  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(".clonedInput").remove();
    }

  </script>

当然，对 html 进行了更改，但是当我单击每个按钮时没有任何反应，甚至在控制台上也没有错误。这里是my fiddle。

我正在使用 jQuery 3.2.1

编辑 1

我试过这个脚本：

$("button.clone").on("click", function()
{
   $('.clonedInput').clone().insertAfter('.clonedInput')
});

它有效，但有两个问题：

1. 每个元素的 ID 不递增；
2. 如果我有 2 个元素并单击按钮，它们将是 4，然后是 8，然后...

编辑 2

我试过了，问题 2 消失了：

$("button.clone").on("click", function()
{
  $('#clonedInput1').clone().insertAfter('#clonedInput1')
});

现在我仍然需要增加 id，以便以后可以使用 Ajax 发送数据。 Here is my updated fiddle.

Answer 1

您缺少父 div。正如您在 clone() 中所做的那样： $(this).parents(".clonedInput").clone()

但在您的 html 中，<div class="clonedInput" id="clonedInput1"> 不是 <button class="btn btn-danger clone">Add More</button> 的父级。

这是更新后的小提琴 - https://jsfiddle.net/b9L4k8mL/2/

Answer 2

检查以下代码是否有效！

$(document).ready(function()
  {
    $("button.clone").on("click", clone);

    $("button.remove").on("click", remove);
  })
    var regex = /^(.+?)(\d+)$/i;
    var cloneIndex = $(".clonedInput").length;
    function clone(){
    
        $(this).closest(".rounded").clone()
            .insertAfter(".rounded:last")
            .attr("id", "rounded" +  (cloneIndex+1))
            .find("*")
            .each(function() {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = match[1] + (cloneIndex+1);
                }
            })
            .on('click', 'button.clone', clone)
            .on('click', 'button.remove', remove);
        cloneIndex++;
    }
    function remove(){
        $(this).parent().parent(".rounded").remove();
    }

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<div class="col-sm-4 rounded" style="background-color: #D3D3D3">
              <div class="row clonedInput" id="clonedInput1">
              <div class="col-sm-6">
                  <label for="diagnosis_data">Medication</label>
                    <fieldset class="form-group">
                      <select class="form-control select" name="diagnosis_data" id="diagnosis_data">
                        <option value="choose">Select</option>
                      </select>
                    </fieldset>
                <!-- End class="col-sm-6" -->
                </div>
                <div class="col-sm-6">
                  <label for="patient_weight">Quantity</label>
                    <fieldset class="form-group">
                      <input type="number" class="form-control" name="patient_weight" id="patient_weight">
                    </fieldset>
                <!-- End class="col-sm-6" -->
                </div>
                <!-- End class="col-sm-6" -->
              </div>
              <div class="actions pull-right">
                <button class="btn btn-danger clone">Add More</button> 
                <button class="btn btn-danger remove">Remove</button>
              </div>

Answer 3

如果您愿意将 id 连字符：

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = 1;

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clonedInput-1" class="clonedInput">
    <div>
        <label for="txtCategory" class="">Learning category <span class="requiredField">*</span></label>
        <select class="" name="txtCategory[]" id="category-1">
            <option value="">Please select</option>
        </select>
    </div>
    <div>
        <label for="txtSubCategory" class="">Sub-category <span class="requiredField">*</span></label>
        <select class="" name="txtSubCategory[]" id="subcategory-1">
            <option value="">Please select category</option>
        </select>
    </div>
    <div>
        <label for="txtSubSubCategory">Sub-sub-category <span class="requiredField">*</span></label>
        <select name="txtSubSubCategory[]" id="subsubcategory-1">
            <option value="">Please select sub-category</option>
        </select>
    </div>
    <div class="actions">
        <button class="clone">Clone</button> 
        <button class="remove">Remove</button>
    </div>
</div>