我想追加输入到父按钮单击但它不工作

Question

我是新来的jquery，我试图添加输入字段上的按钮点击父按钮，但它不工作。我正在尝试添加包含输入的父div与id连接。

<script type='text/javascript'> 
     $('#add1').click(function(){ 
      $('#join').append(" <div class="col-md-5"> 
      <div class="form-group form-md-line-input form-md-floating-label"> 
      <input type="text" class="form-control" id="form_control_1"> 
      <label for="form_control_1">Company name</label> 
      <span class="help-block"></span> 
      </div>") 
     }); 
    </script> 


    <div class="row" id="join"> 
     <div class="col-md-5"> 
      <div class="form-group form-md-line-input form-md-floating-label"> 
      <input type="text" class="form-control" id="form_control_1"> 
      <label for="form_control_1">Company name</label> 
      <span class="help-block"></span> 
      </div> 
     </div> 
     <!--/span--> 
     <div class="col-md-5"> 
      <div class="form-group form-md-line-input form-md-floating-label"> 
      <input type="text" class="form-control" id="form_control_1"> 
      <label for="form_control_1">Company Location</label> 
      <span class="help-block"></span> 
      </div> 
     </div> 
     <div class="btn-toolbar col-md-2" style="padding-top: 20px;"> 
      <div class="btn-group btn-group-sm btn-group-circle"> 
      <button type="button" id="add1" class="btn red"><i class="fa fa-plus"></i></button> 
      <button type="button" id="remove1" class="btn blue"><i class="fa fa-times"></i></button> 
      </div> 
     </div> 
     <!--/span--> 
    </div> 

Answer 1

你已经一个双引号"问题尽量用单引号代替'，如：

$('#join').append('<div class="col-md-5"> 
     <div class="form-group form-md-line-input form-md-floating-label"> \ 
     <input type="text" class="form-control" id="form_control_1"> \ 
     <label for="form_control_1">Company name</label>\ 
     <span class="help-block"></span>\ 
     </div>'); 

希望这有助于。

$('#add1').click(function(){ 
 
    $('#join').append('<div class="col-md-5"><div class="form-group form-md-line-input form-md-floating-label"><input type="text" class="form-control" id="form_control_1"><label for="form_control_1">Company name</label><span class="help-block"></span></div>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="row" id="join"> 
 
    <div class="col-md-5"> 
 
    <div class="form-group form-md-line-input form-md-floating-label"> 
 
     <input type="text" class="form-control" id="form_control_1"> 
 
     <label for="form_control_1">Company name</label> 
 
     <span class="help-block"></span> 
 
    </div> 
 
    </div> 
 
    <!--/span--> 
 
    <div class="col-md-5"> 
 
    <div class="form-group form-md-line-input form-md-floating-label"> 
 
     <input type="text" class="form-control" id="form_control_1"> 
 
     <label for="form_control_1">Company Location</label> 
 
     <span class="help-block"></span> 
 
    </div> 
 
    </div> 
 
    <div class="btn-toolbar col-md-2" style="padding-top: 20px;"> 
 
    <div class="btn-group btn-group-sm btn-group-circle"> 
 
     <button type="button" id="add1" class="btn red"><i class="fa fa-plus"></i></button> 
 
     <button type="button" id="remove1" class="btn blue"><i class="fa fa-times"></i></button> 
 
    </div> 
 
    </div> 
 
    <!--/span--> 
 
</div>

Answer 2

对不起我的英语，追加后使用单引号，请与工作片断

$('#add1').click(function(){ 
 
    $('#join').append('<div class="col-md-5"><div class="form-group form-md-line-input form-md-floating-label"><input type="text" class="form-control" id="form_control_1"><label for="form_control_1">Company name</label><span class="help-block"></span></div>') 
 
});

<div class="row" id="join"> 
 
     <div class="col-md-5"> 
 
      <div class="form-group form-md-line-input form-md-floating-label"> 
 
      <input type="text" class="form-control" id="form_control_1"> 
 
      <label for="form_control_1">Company name</label> 
 
      <span class="help-block"></span> 
 
      </div> 
 
     </div> 
 
     <!--/span--> 
 
     <div class="col-md-5"> 
 
      <div class="form-group form-md-line-input form-md-floating-label"> 
 
      <input type="text" class="form-control" id="form_control_1"> 
 
      <label for="form_control_1">Company Location</label> 
 
      <span class="help-block"></span> 
 
      </div> 
 
     </div> 
 
     <div class="btn-toolbar col-md-2" style="padding-top: 20px;"> 
 
      <div class="btn-group btn-group-sm btn-group-circle"> 
 
      <button type="button" id="add1" class="btn red"><i class="fa fa-plus"></i></button> 
 
      <button type="button" id="remove1" class="btn blue"><i class="fa fa-times"></i></button> 
 
      </div> 
 
     </div> 
 
     <!--/span--> 
 
    </div> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>