Question

我添加了几个输入字段＆amp;引导程序中的标签。然后我添加jQuery / javascript代码添加＆amp;删除动态功能。脚本工作正常。但是这些动态插入的HTML元素没有正确对齐显示。请检查下面给出的图像

我认为，我把一些元素置于错误的位置。请建议我带回正确的校准。这是源代码：

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Add/Remove</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="container">
         <form class="form-inline" role="form">
            <div class="form-group" id="parent_div">
               <div class="row form-group child_div">
                  <div class="col-xs-12 col-lg-3">
                     <label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
                     <div class="input-group" style="">
                        <select class="form-control " id="employeetype" onchange="updateText('')">
                           <option value="" disabled="" selected="">Select Job Type</option>
                           <option value="10">1</option>
                           <option value="10">2</option>
                           <option value="10">3</option>
                        </select>
                     </div>
                  </div>
                  <div class="col-xs-12 col-lg-3">
                     <label for="form-input-col-xs-3" class="wb-inv">Date:</label>
                     <div class="input-group">
                        <input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
                        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                     </div>
                  </div>
                  <div class="col-xs-12 col-lg-3">
                     <label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
                     <div class="input-group">
                        <input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
                        <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>          
                     </div>
                  </div>
                  <div class="form-group ">
                     <div class="input-group">
                        <input class="btn btn-danger deleteButton" type="button" value="-" />       
                     </div>
                  </div>
               </div>
            </div>
            <label for="day" class="col-xs-2 control-label"></label>
            <input class="btn btn-success " type="button" id="create_button" value="+" />
         </form>
      </div>
      <script  type="text/javascript">     
         $('#create_button').click(function() {
           var html = $('.child_div:first').parent().html();
           $(html).insertBefore(this);
         });

         $(document).on("click", ".deleteButton", function() {
           $(this).closest('.child_div').remove();
         });    

      </script>
   </body>
</html>

如果需要进一步的信息，请告诉我。谢谢:)）

Answer 1

删除此行：

options.contentDisposition

它似乎没有任何目的，但却导致错位。

你遇到的另一个问题是红色按钮与其他div对齐。添加padding-top到该div应该向下推，以与其他字段和按钮对齐。

Answer 2

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Bootstrap Add/Remove</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">   </script>
   </head>
 <body>
  <div class="container">
     <form class="form-inline" role="form">
        <div class="col-lg-2">
            <label for="day" class="col-xs-2 control-label"></label>
            <input class="btn btn-success " type="button" id="create_button" value="+" />
        </div>
        <div class="col-lg-10">
           <div class="form-group" id="parent_div ">
              <div class="row child_div col-lg-12">
                    <div class="col-lg-4">
                       <label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
                       <div class="input-group" style="">
                          <select class="form-control " id="employeetype" onchange="updateText('')">
                             <option value="" disabled="" selected="">Select Job Type</option>
                             <option value="10">1</option>
                             <option value="10">2</option>
                             <option value="10">3</option>
                          </select>
                       </div>
                    </div>
                    <div class="col-lg-4">
                       <label for="form-input col-xs-3" class="wb-inv">Date:</label>
                       <div class="input-group">
                          <input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
                          <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                       </div>
                    </div>
                    <div class="col-lg-3">
                       <label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
                       <div class="input-group">
                          <input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
                          <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>          
                       </div>
                    </div>
                    <div class="col-lg-1">
                    <div class="input-group">
                       <input class="btn btn-danger deleteButton" type="button" value="-" />       
                    </div>
                    </div>
             </div>
          </div>
        </div>


     </form>
  </div>
  <script  type="text/javascript">   
     var html = $('.form-group').html();  
     $('#create_button').on("click", function() {
       $('.form-group').append(html);
     });

     $(document).on("click", ".deleteButton", function() {
       $(this).closest('.child_div').remove();
     });    

  </script>

Answer 3

所以这里是完整的html，有一些样式来修复对齐：

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Add/Remove</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <style>
        div.child_div:first-child {
            margin-top: 0px;
            padding-top: 0px;
        }
        div.child_div {
            width: 615px;
        }
        div.job-position {
            width: 220px;
        }
        div.job-type {
            width: 180px;
        }
        div.job-amount {
            width: 180px;
        }
        div.form-group {
            padding-top: 25px;
        }
        input#create_button {
            margin-top: 50px;
        }
      </style>
   </head>
   <body>
      <div class="container">
         <form class="form-inline" role="form">
            <div class="form-group" id="parent_div">
               <div class="row form-group child_div">
                  <div class="col-xs-12 col-lg-3 job-position">
                     <label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
                     <div class="input-group" style="">
                        <select class="form-control " id="employeetype" onchange="updateText('')">
                           <option value="" disabled="" selected="">Select Job Type</option>
                           <option value="10">1</option>
                           <option value="10">2</option>
                           <option value="10">3</option>
                        </select>
                     </div>
                  </div>
                  <div class="col-xs-12 col-lg-3 job-date">
                     <label for="form-input-col-xs-3" class="wb-inv">Date:</label>
                     <div class="input-group">
                        <input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
                        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                     </div>
                  </div>
                  <div class="col-xs-12 col-lg-3 job-amount">
                     <label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
                     <div class="input-group">
                        <input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
                        <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>          
                     </div>
                  </div>
                  <div class="form-group ">
                     <div class="input-group">
                        <input class="btn btn-danger deleteButton" type="button" value="-" />       
                     </div>
                  </div>
               </div>
            </div>
            <input class="btn btn-success " type="button" id="create_button" value="+" />
         </form>
      </div>
      <script  type="text/javascript">     
         $('#create_button').click(function() {
           var html = $('.child_div:first').parent().html();
           $(html).insertBefore(this);
         });

         $(document).on("click", ".deleteButton", function() {
           $(this).closest('.child_div').remove();
         });    

      </script>
   </body>
</html>

你仍然有两个问题：

该页面允许您删除最后一项。代码应该处理这种情况。问题是，如果删除了最后一项，则无法从第一项创建新项目。
加载页面，单击添加，删除第一项，然后再次单击添加，您将获得多个绿色按钮。你应该解决这个问题。

为什么这些动态插入的HTML元素没有正确对齐显示

3 个答案: