ボタンクリックが応答しない

Question

<form class="cityForm form-horizontal form-label-right" action="" method="POST" novalidate> 
    <div class="form-group"> 
     <div class="city col-md-4 col-sm-4 col-xs-12"> 
      <div class="item form-group"> 
       <label class="control-label" for="city">City<span class="required">*</span> </label> 
       <div class=""> 
        <select class="form-control" id="city" name="pick_up_city"> 
         <option>Select City</option> 
         <option>Mumbai</option> 
         <option>Delhi</option> 
         <option>Jaipur</option> 
        </select> 
       </div> 
      </div> 
     </div> 
     <div class="address col-md-8 col-sm-8 col-xs-12"> 
      <div class="item form-group"> 
       <label class="control-label" for="address">Address<span class="required">*</span> </label> 
       <div class=""> 
        <input type="text" class="form-control" id="address" name="pick_up_address"> </div> 
      </div> 
     </div> 
     <div class="multiCheck"> 
      <input type="checkbox" value="Yes" id="multiCheck">Have more than one pickup point? 
      <br> </div> 
    </div> 
    <div class="form-group hide" id="cityFormExtend"> 
     <div class="city col-md-4 col-sm-4 col-xs-12"> 
      <div class="item form-group"> 
       <label class="control-label" for="city">City<span class="required">*</span> </label> 
       <div class=""> 
        <select class="form-control" id="city" name="pick_up_city"> 
         <option>Select City</option> 
         <option>Mumbai</option> 
         <option>Delhi</option> 
         <option>Jaipur</option> 
        </select> 
       </div> 
      </div> 
     </div> 
     <div class="address col-md-8 col-sm-8 col-xs-12"> 
      <div class="item form-group"> 
       <label class="control-label" for="address">Address<span class="required">*</span> </label> 
       <div class=""> 
        <input type="text" class="form-control" id="address" name="pick_up_address"> </div> 
      </div> 
     </div> 
     <div class="multiBtn"> 
      <button type="button" class="addBtn">Add another pickup location</button> 
      <button type="button" class="removeBtn">Remove this pickup location</button> 
     </div> 
    </div> 
</form> 

上記は私のhtml形式であり、2つのフォームグループクラスを持っています。最初のブラウザはブラウザが開いても常に表示され、2番目のブラウザはチェックボックスがオンの場合にのみ表示されます。ここまでうまくいっています。

ここで、removeBtnは作成された新しいフォームを削除し、別のフォームを追加するにはaddBtnを削除します。

以下

は私のJavaScriptコードです：

$(document).ready(function() { 
    $('#multiCheck').change(function() { 
     if (this.checked) { 
      var $pick = $('#cityFormExtend'); 
      $clone = $pick.clone().removeClass('hide').removeAttr('id').insertBefore($pick); 
     } 
     if (!this.checked) { 
      $clone.remove(); 
     } 
    }).on('click', '.addBtn', function() { 
     var $pick = $(this).parents('.form-group'); 
     $clone = $pick.clone().insertBefore($pick); 
    }).on('click', '.removeBtn', function() { 
     var $pick = $(this).parents('.form-group'); 
     $pick.remove(); 
    }) 
}); 

Answer 1

使用

<script> 
$(document).on('click', '.addBtn', function(){ 
     var $pick = $(this).parents('.form-group'); 
     $clone = $pick.clone().insertBefore($pick); 
    }); 

    $(document).on('click', '.removeBtn', function() { 
     var $pick = $(this).parents('.form-group'); 
     $pick.remove(); 
    }); 
</script>