如何通过点击按钮动态创建对象

我也想添加一个加号按钮，这样当用户点击任一端时，一组新的矩形出现在原始矩形的上方或下方。（取决于加号按钮他们点击）

所以我想实现以下目标：

我已经试过/迄今发现：

$(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

如何通过点击按钮动态创建对象

回答

相关问题