用jquery生成动态表单_Jquery_Forms_Dynamic

用jquery生成动态表单

jquery forms dynamic

用jquery生成动态表单,jquery,forms,dynamic,Jquery,Forms,Dynamic,我在动态生成表单时遇到问题。这是我的代码： <script> $(document).ready(function(){ $('#add').on('click',function(){ $('<p><input type="text" id="testo"/><input type="button" name="remove" id="remove" Value="rimuovi" />

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

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


$（文档）.ready（函数（）{
$（'#添加'）。在（'单击'，函数（）上）{
$（''）。附录（内容）；
});
//$（'#remove'）。在（'click'，function（）{
//$（this.parents（'p'）.remove（）；
//});
$（'body'）。在（“单击”，“删除”，函数（）上）{
console.log（$（this.text（））；
});
});

添加字段可以很好地工作，甚至删除按钮也是静态编写的。问题在于jquery生成的按钮“remove”。它不工作，也不会在控制台上生成任何输出。谢谢大家!

试试这个：您多次使用相同的

id

。使用唯一的

id

s或将其设置为类。请参阅下面的代码

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

            });
  });

$（文档）.ready（函数（）{
$（'#添加'）。在（'单击'，函数（）上）{
$（''）。附录（内容）；
});
//$（'#remove'）。在（'click'，function（）{
//$（this.parents（'p'）.remove（）；
//});
$（'body'）。在（“单击”，“输入[type='button'].remove”，函数（）上{
console.log（$（this.text（））；
});
});

试试这个：您多次使用相同的

id

。使用唯一的

id

s或将其设置为类。请参阅下面的代码

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

            });
  });

$（文档）.ready（函数（）{
$（'#添加'）。在（'单击'，函数（）上）{
$（''）。附录（内容）；
});
//$（'#remove'）。在（'click'，function（）{
//$（this.parents（'p'）.remove（）；
//});
$（'body'）。在（“单击”，“输入[type='button'].remove”，函数（）上{
console.log（$（this.text（））；
});
});

$（文档）.ready（函数（）{
$（'#添加'）。在（'单击'，函数（）上）{
$（''）。附录（内容）；
});
$（文档）。在（'单击'，'删除'，函数（）上）{
$（this.parents（'p'）.remove（）；
});
$（'body'）。在（“单击”，“删除”，函数（）上）{
console.log（$（this.text（））；
});
});




$（文档）.ready（函数（）{
$（'#添加'）。在（'单击'，函数（）上）{
$（''）。附录（内容）；
});
$（文档）。在（'单击'，'删除'，函数（）上）{
$（this.parents（'p'）.remove（）；
});
$（'body'）。在（“单击”，“删除”，函数（）上）{
console.log（$（this.text（））；
});
});