用jquery生成动态表单答案

【问题标题】：Generating dynamic form with jquery用jquery生成动态表单
【发布时间】：2016-01-20 11:49:06
【问题描述】：

我在动态生成表单时遇到问题。这是我的代码：

    <script>
    $(document).ready(function(){
        $('#add').on('click',function(){
            $('<p><input type="text"  id="testo"/><input type="button" name="remove" id="remove" Value="rimuovi" /></p>').appendTo(content);

        });

        //$('#remove').on('click', function() { 
            //$(this).parents('p').remove();
        //});
        $( 'body' ).on( "click", "#remove", function() {

            console.log( $( this ).text() );

        });
    });
    </script>
</head>
<body>
    <div id="content">
        <p>
            <input type="text" value="" placeholder="Input Value"/>
            <input type ="checkbox"  ></input>
            <input type="button" name="remove" id="remove" Value="rimuovi"></input>
            <input type="button" name="add" id="add" Value="add"></input>
        </p>
    </div>

</body>

添加字段可以正常工作，甚至删除按钮也是静态编写的。问题在于 jquery 生成的按钮“删除”。它不起作用，并且不会在控制台上生成任何输出。谢谢！

【问题讨论】：

标签： jquery forms dynamic

【解决方案1】：

    $(document).ready(function() {
      $('#add').on('click', function() {
        $('<p><input type="text"  id="testo"/><input type="button" name="remove" id="remove" Value="rimuovi" /></p>').appendTo(content);

      });

      $(document).on('click', '#remove', function() {
        $(this).parents('p').remove();
      });
      $('body').on("click", "#remove", function() {

        console.log($(this).text());

      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <p>
    <input type="text" value="" placeholder="Input Value" />
    <input type="checkbox"></input>
    <input type="button" name="remove" id="remove" Value="rimuovi"></input>
    <input type="button" name="add" id="add" Value="add"></input>
  </p>
</div>

这是代码

您需要在文档上运行 on click 以获取动态加载的元素

【讨论】：

【解决方案2】：

试试这个：你多次使用相同的id。要么使用唯一的ids，要么让它成为类。见下面代码

    $(document).ready(function(){
            $('#add').on('click',function(){
                $('<p><input type="text"  id="testo"/><input type="button" name="remove" class="remove" Value="rimuovi" /></p>').appendTo(content);

            });

            //$('#remove').on('click', function() { 
                //$(this).parents('p').remove();
            //});
            $( 'body' ).on( "click", "input[type='button'].remove", function() {

                console.log( $( this ).text() );

            });
  });

【讨论】：