フォーム要素を追加するとダイナミックテキストボックスの作業が中止されます

作成しているフォーム用のブートストラップでダイナミックテキストボックスを作成しようとしています。フォーム要素を追加するとダイナミックテキストボックスの作業が中止されます

$(function() { 
 
    $(document).on('click', '.btn-add', function(e) { 
 
    e.preventDefault(); 
 

 
    var controlForm = $('.controls form:first'), 
 
     currentEntry = $(this).parents('.entry:first'), 
 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 
 

 
    newEntry.find('input').val(''); 
 
    controlForm.find('.entry:not(:last) .btn-add') 
 
     .removeClass('btn-add').addClass('btn-remove') 
 
     .removeClass('btn-success').addClass('btn-danger') 
 
     .html('<span class="glyphicon glyphicon-minus"></span>'); 
 
    }).on('click', '.btn-remove', function(e) { 
 
    $(this).parents('.entry:first').remove(); 
 

 
    e.preventDefault(); 
 
    return false; 
 
    }); 
 
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="control-group" id="fields"> 
 
    <label class="control-label" for="field1">Nice Multiple Form Fields</label> 
 
    <div class="controls"> 
 
     <form role="form" autocomplete="off"> 
 
     <div class="entry input-group col-xs-3"> 
 
      <input class="form-control" name="fields[]" type="text" placeholder="Type something" /> 
 
      <span class="input-group-btn"> 
 
           <button class="btn btn-success btn-add" type="button"> 
 
            <span class="glyphicon glyphicon-plus"></span> 
 
      </button> 
 

 
      </span> 
 

 
     </div> 
 
     </form> 
 
     <br> 
 
     <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add </small> 
 
    </div> 
 
    </div> 
 
</form>

：私はそれは以下のように動作を停止し、何らかの理由でその周りにフォーム要素を追加するとき

$(function() { 
 
    $(document).on('click', '.btn-add', function(e) { 
 
    e.preventDefault(); 
 

 
    var controlForm = $('.controls form:first'), 
 
     currentEntry = $(this).parents('.entry:first'), 
 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 
 

 
    newEntry.find('input').val(''); 
 
    controlForm.find('.entry:not(:last) .btn-add') 
 
     .removeClass('btn-add').addClass('btn-remove') 
 
     .removeClass('btn-success').addClass('btn-danger') 
 
     .html('<span class="glyphicon glyphicon-minus"></span>'); 
 
    }).on('click', '.btn-remove', function(e) { 
 
    $(this).parents('.entry:first').remove(); 
 

 
    e.preventDefault(); 
 
    return false; 
 
    }); 
 
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="control-group" id="fields"> 
 
    <label class="control-label" for="field1">Nice Multiple Form Fields</label> 
 
    <div class="controls"> 
 
    <form role="form" autocomplete="off"> 
 
     <div class="entry input-group col-xs-3"> 
 
     <input class="form-control" name="fields[]" type="text" placeholder="Type something" /> 
 
     <span class="input-group-btn"> 
 
           <button class="btn btn-success btn-add" type="button"> 
 
            <span class="glyphicon glyphicon-plus"></span> 
 
     </button> 
 

 
     </span> 
 

 
     </div> 
 
    </form> 
 
    <br> 
 
    <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add </small> 
 
    </div> 
 
</div>

問題がある：私は作品次のコードを持っています

すべてのアイデアをいただければ幸いです。

出典

2016-04-06 user3051963

ネストされた形ではありません、言葉では... HTMLでnested form is not possible ...

ことはできません。あるページに複数のフォームを含めることはできますが、それらはネストしないでください。 4.10.3フォーム要素

コンテンツモデル：

フローコンテンツ、ないフォーム要素の子孫と。

<div class="control-group" id="fields"> 
    <label class="control-label" for="field1">Nice Multiple Form Fields</label> 
    <div class="controls"> 
     <form role="form" autocomplete="off"> 
     <div class="entry input-group col-xs-3"> 
      <input class="form-control" name="fields[]" type="text" placeholder="Type something" /> 
      <span class="input-group-btn"> 
           <button class="btn btn-success btn-add" type="button"> 
            <span class="glyphicon glyphicon-plus"></span> 
      </button> 

      </span> 

     </div> 
     </form> 
     <br> 
     <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add </small> 
    </div> 
    </div> 


$(function() { 
    $(document).on('click', '.btn-add', function(e) { 
    e.preventDefault(); 

    var controlForm = $('.controls form:first'), 
     currentEntry = $(this).parents('.entry:first'), 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 

    newEntry.find('input').val(''); 
    controlForm.find('.entry:not(:last) .btn-add') 
     .removeClass('btn-add').addClass('btn-remove') 
     .removeClass('btn-success').addClass('btn-danger') 
     .html('<span class="glyphicon glyphicon-minus"></span>'); 
    }).on('click', '.btn-remove', function(e) { 
    $(this).parents('.entry:first').remove(); 

    e.preventDefault(); 
    return false; 
    }); 
});

出典

2016-04-06 10:38:33 nisar