个人中心
gpt4 book ai didi

javascript - 单击按钮时重复一个 div

转载 作者：行者123 更新时间：2023-11-30 10:22:02 25 4
gpt4 key购买 nike

下面的代码用于重复一个 div。但它不起作用。请帮助我。

<html>
  <head>
    <script>
      $(".repeat").live('click', function () {
        var $self = $(this);
        $self.after($self.parent().clone());
        $self.remove();
      });
  </script>
  </head>
  <body>
    <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>
  </body>
</html>

最佳答案

首先在你的代码中添加jquery并使用on()代替 live() .

同时在 $(function(){...}) 中编写您的代码，以便您的代码在文档准备就绪

后正常工作 
<script src="http:/code.jquery.com/jquery-1.9.1.js"></script>
<script>
   $(function () {
       $(".repeat").on('click', function () {
          var $self = $(this);
          $self.after($self.parent().clone());
          $self.remove();
       });
   });
</script>

Working Demo

已更新，如果您希望它适用于更多输入，请试试这个，

$(function () {
    $(".repeat").on('click', function (e) {
        e.preventDefault();// to prevent form submit
        var $self = $(this);
        $self.before($self.prev('table').clone());// use prev() not parent()
        //$self.remove();// remove this line so you can add more inputs
    });
});

Updated Demo

关于javascript - 单击按钮时重复一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21135520/

25 4 0
文章推荐： java - 偏向锁定设计决策
文章推荐： Java Stream.collect 使用 groupingBy
文章推荐： web-services - iOS 8 swift Soap Web 服务通信
文章推荐： java - 实现一个引用多个类的 Java 类/接口(interface)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com