如何通過點擊按鈕動態創建對象

我也想添加一個加號按鈕，這樣當用戶點擊任一端時，一組新的矩形出現在原始矩形的上方或下方。（取決於加號按鈕他們點擊）

所以我想實現以下目標：

我已經試過/迄今發現：

$(function() { 
 
    $(".repeat").on('click', function (e) { 
 
     e.preventDefault(); 
 
     var $self = $(this); 
 
     $self.before($self.prev('table').clone()); 
 
     //$self.remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="repeatable"> 
 
     <table border="1"> 
 
      <tr> 
 
       <td> 
 
        <input type="text" name="userInput[]" /> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
     <button class="repeat">Add Another</button> 
 
    </div> 
 
    <input type="submit" value="Submit" /> 
 
</form>

上述示例僅適用於表單。有沒有人知道我可以如何去做這個工作，我想要什麼？

來源

2016-09-16 blazerix

究竟你*上面的例子只適用於形式。*是什麼意思？這工作沒有任何表單元素，請參閱http://jsfiddle.net/Yjtju/313/ – DelightedD0D

@ DelightedD0D抱歉，我的意思是它只複製輸入表單。我想知道如何讓它在一系列矩形上工作，就像在我的照片中一樣。 – blazerix

對於你的意思，我仍然不是100％，你現在的代碼複製了表格，而不是表格，請看這裏http://prntscr.com/civ6g9 – DelightedD0D

我修改了您的代碼以允許添加到頂部，或添加到下面。

我編輯了你的事件監聽器來檢查按鈕是否有特定的類。如果是這樣，請在上面或下面添加。它還聽「身體」點擊，因爲新的DOM元素不會有附加事件偵聽器：

$("body").on('click', ".repeat", function (e) { //other stuff here}

此外，改變你的HTML所以它不依賴於「形式」，你可以換出的元素類型，只要類仍然存在。

$(function() { 
 
    $("body").on('click', ".repeat", function (e) { 
 
     e.preventDefault(); 
 
     var $self = $(this); 
 
     var $parent = $self.parent(); 
 
     if($self.hasClass("add-bottom")){ 
 
      $parent.after($parent.clone()); 
 
     } else { 
 
      $parent.before($parent.clone()); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="container"> 
 
    <div class="repeatable"> 
 
     <button class="repeat add-top">Add above</button> 
 
     <table border="1"> 
 
      <tr> 
 
       <td> 
 
        <input type="text" name="userInput[]" /> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
     <button class="repeat add-bottom">Add below</button> 
 
    </div> 
 
    </div>

來源

2016-09-16 22:31:41 hellojebus

如何通過點擊按鈕動態創建對象

回答

相關問題