所需的屬性不適用於克隆元素

Question

我有一些具有required屬性的元素，我編寫了一個 jQuery 代碼來克隆這個元素。 當我按下提交時，它應該顯示一條消息，指示填充輸入，但它不適用於克隆的元素......

<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'); });