Question

我是jquery的新手，我试图在按钮点击动态地附加输入字段到父div，但它不起作用。我正在尝试在父div中添加包含id连接的div。

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

我试图在按钮点击时将输入附加到父div，但它不起作用

2 个答案: