按钮点击没有响应

<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表单，它有两个form-group类。第一个总是在浏览器打开时显示，第二个只有在复选框被选中时才显示。它在这里工作得很好。按钮点击没有响应

现在，我想要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(); 
    }) 
});

来源

2016-06-12 Aman Agarwal

使用

<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>

来源

2016-06-12 14:12:01

是啊，它的工作原理。非常感谢。 –

按钮点击没有响应

回答

相关问题