用jquery生成动态表单
Posted
技术标签:
【中文标题】用jquery生成动态表单【英文标题】：Generating dynamic form with 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 生成的按钮“删除”。它不起作用，并且不会在控制台上生成任何输出。谢谢！
【问题讨论】：
【参考方案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() );
);
);
【讨论】：
以上是关于用jquery生成动态表单的主要内容，如果未能解决你的问题，请参考以下文章