Question

我有一些具有required属性的元素，并且编写了一个jQuery代码来克隆此元素。当我按Submit时，它应该显示一条消息，指示要填充输入，但不适用于克隆的元素...

<div class='col-md-12'>
  <div class='box box-primary'>
    <div class='box-header with-border'>
      <h3 class='box-title'>Information of Person</h3>
    </div>

    <div class='form-group'>
      <div class='box-body rowClone2'>

        <div class='row rowClone'>
          <div class='col-xs-6 col-md-3'>
            <input type="text" class="form-control" required>
          </div>
          <div class='col-xs-6 col-md-3'>
            <input type="text" class="form-control" required>
          </div>
          <div class='col-xs-6 col-md-3' >
            <input type="tel" class="form-control">
          </div>
          <div class='col-xs-6 col-md-3'>
            <input type="text" class="form-control" required>
          </div>
        </div>
        <br>

      </div>
      <div class="row">
        <div class="col-md-3">
          <input type="submit" value="Submit" formnovalidate>                  
        </div>
      </div>
    </div>

Answer 1

我不确定这是否就是您的整个HTML，但是您可能会丢失包装该HTML块的表格。无论输入是在页面加载时输入的，还是使用我添加的按钮克隆的，此代码都对我有用。

我猜测问题出在您的表单标签上，无论它是丢失还是格式错误。

$(function() {
  $(document).on('click', '.cloneLastInput', function() {
    var clone = $('.form-control:last').closest('div').clone();
    $('.rowClone').append(clone);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="post">
  <button type="button" class="cloneLastInput">clone last input</button>
  <div class='col-md-12'>
    <div class='box box-primary'>
      <div class='box-header with-border'>
        <h3 class='box-title'>Information of Person</h3>
      </div>
      <div class='form-group'>
        <div class='box-body rowClone2'>
          <div class='row rowClone'>
            <div class='col-xs-6 col-md-3'>
              <input type="text" class="form-control" required="required">
            </div>
            <div class='col-xs-6 col-md-3'>
              <input type="text" class="form-control" required>
            </div>
            <div class='col-xs-6 col-md-3'>
              <input type="tel" class="form-control">
            </div>
            <div class='col-xs-6 col-md-3'>
              <input type="text" class="form-control" required>
            </div>
          </div>
          <br>
        </div>
        <div class="row">
          <div class="col-md-3">
            <input type="submit" value="Submit">
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Answer 2

我通过jquery的make循环解决，为每个新克隆添加新的ID或名称例如：-

var num =4;
    var count = $('#c3').val();
    for(i = 1 ; count>i ; i++){  
      var clone = $('.rowClone:first').clone();
      $('.rowClone2').append(clone,'<br>')  
    }
   
    $('.rowClone').not(':first').find('input').each(function(){
      num++
       $(this).prop('name','info'+num);
       $(this).prop('required');
     });

要求的属性不适用于克隆的元素

2 个答案: