我正處於創建動態表單的第一階段。問題是，當我點擊窗體的按鈕時，第二次，窗體雙擊添加。第一次點擊時，它可以正常工作，只需添加一個表格即可。動態表單中的重複問題

代碼：

<div class="panel-body panel-primary"> 
    <ul id="lista" style="list-style-type: none"> 
     <li id="listap"> 
      <form id="formPregunta" > 
       <div class="form-group"> 
        <label>Pregunta:</label> 
        <input type="text"> </input> 
       </div> 
       <div class="form-group"> 
        <label>tipo respuesta:</label> 
        <select> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
         <option>4</option> 
        </select> 
       </div> 
       <div class="form-group"> 
        <input class="bottom" type="button" value="agregar"> </input> 
       </div> 
      </form> 
     </li> 
    </ul> 
</div> 


<script type="text/javascript"> 
    $(document).ready(); 

    $('input:button').on('click', function(e){ 
      e.preventDefault(); 
      var newF = $('#lista').html(); 
      $('#listap').after(newF); 

    }); 
</script>

生成.html（）函數的文檔說：獲取第一元素的HTML內容集合中匹配的元素或設置每個匹配的元素的HTML內容。

我不知道會有什麼重複的問題。另一個問題是，事件只會在第一種形式的按鈕上起作用，在其他形式中不起作用。任何形式的答案或建議表示讚賞。

來源

2015-09-22 Mauro Rufino

爲什麼你沒有表單元素的名稱（輸入，選擇）？ –

您可以使用first（）函數獲取第一個li。看到我的答案與工作演示[這裏]（http://stackoverflow.com/questions/32709109/duplication-problems-in-dynamic-forms/32709224#32709224） –

試試這個：

var newF = $('#lista').html(); 
 
$('body').on('click', 'input:button', function(e) { 
 
    e.preventDefault(); 
 
    $('#listap').after(newF); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-body panel-primary"> 
 
    <ul id="lista" style="list-style-type: none"> 
 
    <li id="listap"> 
 
     <form class="formPregunta"> 
 
     <div class="form-group"> 
 
      <label>Pregunta:</label> 
 
      <input type="text" name="text"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label>tipo respuesta:</label> 
 
      <select name="select"> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
      <option>4</option> 
 
      </select> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input class="bottom" type="button" value="agregar"></input> 
 
     </div> 
 
     </form> 
 
    </li> 
 
    </ul> 
 
</div>

你需要考慮以下幾點：

不應該有一個以上的id文檔中
var newF = $('#lista').html();將返回整個DOM目前內部容器，因此你會得到每一個n*2元素點擊
作爲稍後追加按鈕，沒有事件binded因此你需要使用event delegation
你應該有name屬性來處理表單服務器端

來源

2015-09-22 05:49:16 Rayon

感謝您的幫助！ –

Demo

可以使用first()功能得到類似下面

$(function() { 
    $('input:button').on('click', function(e){ 
      e.preventDefault(); 
      var newF = $('#lista li').first().html(); 
      $('#listap').after(newF); 

    }); 
});

這將讓第一li的#lista裏面的內容第一個元素。

來源

2015-09-22 05:45:14

謝謝！有用。 :) –

現在，你可以試試下面的js代碼，以及和也在這裏看看演示： https://jsfiddle.net/agovomov/1/

其實解決的辦法是，只是先來從DOM從<li id="listap">所以它不會做任何重複。

$(document).ready(function(){ 
    $('body').on('click', 'input:button', function(e) { 
     e.preventDefault(); 
     var newF = $('#lista form:first').html(); 
     $('#listap').after(newF); 
    }); 
});

謝謝！

來源

2015-09-22 05:48:53

演示在這裏：https://jsfiddle.net/agovomov/1/ –

動態表單中的重複問題

回答

Demo

相關問題