divをブートストラップフォーム要素で動的に追加するにはどうすればいいですか？

Question

これは私のJSのバイオリンです：Demo

私はしかし、それは動作しませんでした動的ボックス内のフォーム の要素（式LHS、RHS、演算子、データ型） を複製するJSコードの下に使用して試してみました。

誰かが私にこれを手伝ってもらえますか？また、Javascript/jQueryのヘルプを見つけると、Vue.jsを使用して記述する必要があります。

ご協力いただければ幸いです。ありがとうございました！

 $('#addRow').click(function() { 

      $('<div/>', { 
       'class' : 'child-border', html: GetHtml() 
    }).hide().appendTo('#container').slideDown('slow'); 

    }); 

function GetHtml() 
{ 
     var len = $('.child-border').length; 
    var $html = $('.parent-border').clone(); 
    $html.find('[name=lhs]')[0].name="lhs" + len; 
    $html.find('[name=rhs]')[0].name="rhs" + len; 
    $html.find('[name=data]')[0].name="data" + len; 
    $html.find('[name=op]')[0].name="op" + len; 

    return $html.html();  
} 

Answer 1

あなたはすべてを簡略化することができます。

• クローン親ボーダー
• 各入力要素については、名前と親の国境からクラストグルID
• を変更します子どもの国境に接して追加する。

覚えておいてください：IDは一意でなければならず、フィールドごとにajaxにする必要があります。

$('#deleteRow').closest('.form-group').hide(); 
 
$('#addRow').on('click', function (e) { 
 
    var len = $('.child-border').length; 
 
    $('.parent-border').clone().find(':input').each(function (idx, ele) { 
 
     ele.name = ele.name + len; 
 
     ele.id = ele.id + len; 
 
     ele.value = ''; 
 
    }).end().find('.form-group').toggle(true).end() 
 
      .toggleClass('parent-border child-border').hide() 
 
      .appendTo('#container').slideDown('slow'); 
 
}); 
 

 
$('button.btn:contains("Save")').on('click', function (e) { 
 
    var jsonData = $('form.form-horizontal') 
 
      .find(':input:not(button)').get() 
 
      .reduce(function (acc, ele) { 
 
       acc[ele.name || ele.id] = ele.value; 
 
       return acc; 
 
      }, {}); 
 
    console.log(jsonData); 
 
}); 
 

 
$('#container').on('click', '[id^=deleteRow]', function(e) { 
 
    var jsonData = $(this).closest('.child-border, .parent-border') 
 
      .find(':input:not(button)').get() 
 
      .reduce(function (acc, ele) { 
 
       acc[ele.name || ele.id] = ele.value; 
 
       return acc; 
 
      }, {}); 
 
    $(this).closest('.child-border, .parent-border').remove(); 
 
    console.log(jsonData); 
 
});

.navbar-nav li { 
 
    margin-top: 8px; 
 
    margin-bottom: 8px; 
 
} 
 
.tabs-container { 
 
    margin-top: 100px; 
 
} 
 
.parent-border, .child-border { 
 
    border: 1px solid #CCC; 
 
    border-radius: 4px; 
 
    padding: 15px; 
 
    margin-bottom: 15px; 
 
} 
 
.btn-circle.btn-lg { 
 
    width: 50px; 
 
    height: 50px; 
 
    padding: 10px 16px; 
 
    font-size: 18px; 
 
    line-height: 1.33; 
 
    border-radius: 25px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header pull-right"> 
 
      <ul class="nav navbar-nav"> 
 
       <li> 
 
        <button class="btn btn-md btn-success">Login</button> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <div class="row tabs-container"> 
 
     <div class="col-sm-offset-2 col-sm-8"> 
 
      <div class="panel with-nav-tabs panel-default"> 
 
       <div class="panel-heading"> 
 
        <ul class="nav nav-tabs"> 
 
         <li class="active"><a href="#tab1default" data-toggle="tab">Rules</a></li> 
 
         <li><a href="#tab2default" data-toggle="tab">Events</a></li> 
 
        </ul> 
 
       </div> 
 
       <div class="panel-body"> 
 
        <div class="tab-content"> 
 
         <div class="tab-pane fade in active" id="tab1default"> 
 
          <form class="form-horizontal"> 
 
           <div class="form-group"> 
 
            <label class="control-label col-sm-2" for="name">Name:</label> 
 

 
            <div class="col-sm-10"> 
 
             <input type="text" class="form-control" id="name" name="name" 
 
               placeholder="Enter name"> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label class="control-label col-sm-2" for="type">Type:</label> 
 

 
            <div class="col-sm-10"> 
 
             <select class="form-control" id="type1" name="type1"> 
 
              <option>Type1</option> 
 
              <option>Type2</option> 
 
              <option>Type3</option> 
 
              <option>Type4</option> 
 
             </select> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label class="control-label col-sm-2" for="type">Description:</label> 
 

 
            <div class="col-sm-10"> 
 
        <textarea class="form-control" rows="4" cols="50" name="descriptionRules">XYZ 
 
        </textarea> 
 
            </div> 
 
           </div> 
 
           <div class="parent-border col-sm-offset-2 col-sm-10"> 
 
            <div class="form-group"> 
 
             <div class="col-sm-offset-10"> 
 
              <button type="button" id="deleteRow" class="btn btn-success btn-circle btn-lg"><i 
 
                class="glyphicon glyphicon glyphicon-trash"></i></button> 
 
             </div> 
 
            </div> 
 
            <div class="form-group"> 
 
             <label class="control-label col-sm-2" for="type">Expression LHS:</label> 
 

 
             <div class="col-sm-10"> 
 
              <input type="text" class="form-control" id="elhs" name="elhs" 
 
                placeholder="Enter LHS" 
 
                name="lhs"> 
 
             </div> 
 
            </div> 
 
            <div class="form-group"> 
 
             <label class="control-label col-sm-2" for="type">Operator</label> 
 

 
             <div class="col-sm-10"> 
 
              <select class="form-control" id="op" name="op"> 
 
               <option><=</option> 
 
               <option>>=</option> 
 
               <option>!==</option> 
 
               <option><</option> 
 
               <option>></option> 
 
               <option>==</option> 
 
              </select> 
 
             </div> 
 
            </div> 
 
            <div class="form-group"> 
 
             <label class="control-label col-sm-2" for="erhs">Expression RHS:</label> 
 

 
             <div class="col-sm-10"> 
 
              <input type="text" class="form-control" id="erhs" name="erhs" 
 
                placeholder="Enter RHS" 
 
                name="rhs"> 
 
             </div> 
 
            </div> 
 
            <div class="form-group"> 
 
             <label class="control-label col-sm-2" for="type">Datatype:</label> 
 

 
             <div class="col-sm-10"> 
 
              <input type="text" class="form-control" id="datatype" name="datatype" 
 
                placeholder="Enter datatype" name="datatype"> 
 
             </div> 
 
            </div> 
 
           </div> 
 
           <div id="container"> 
 
           </div> 
 
           <div class="form-group"> 
 
            <div class="col-sm-offset-6"> 
 
             <button type="button" id="addRow" class="btn btn-success btn-circle btn-lg"><i 
 
               class="glyphicon glyphicon-plus"></i></button> 
 
            </div> 
 
           </div> 
 
          </form> 
 
         </div> 
 
         <div class="tab-pane fade" id="tab2default"> 
 
          <form class="form-horizontal"> 
 
           <div class="form-group"> 
 
            <label class="control-label col-sm-2" for="name1">Name:</label> 
 

 
            <div class="col-sm-10"> 
 
             <input type="text" class="form-control" id="name1" name="name1" 
 
               placeholder="Enter name"> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label class="control-label col-sm-2" for="type">Type:</label> 
 

 
            <div class="col-sm-10"> 
 
             <select class="form-control" id="type" name="type"> 
 
              <option>Type1</option> 
 
              <option>Type2</option> 
 
              <option>Type3</option> 
 
              <option>Type4</option> 
 
             </select> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label class="control-label col-sm-2" for="type">Description:</label> 
 

 
            <div class="col-sm-10"> 
 
        <textarea class="form-control" rows="4" cols="50" name="descriptionEvents">XYZ 
 
        </textarea> 
 
            </div> 
 
           </div> 
 
          </form> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- /.container --> 
 
    <div class="navbar navbar-inverse navbar-fixed-bottom"> 
 
     <div class="container"> 
 
      <div class="navbar-footer pull-right"> 
 
       <ul class="nav navbar-nav"> 
 
        <li> 
 
         <button class="btn btn-md btn-success">Save</button> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>