gpt4 book ai didi

javascript - jQuery .remove() 不适用于动态表单

转载 作者:行者123 更新时间:2023-11-28 20:18:15 26 4
gpt4 key购买 nike

我正在创建一个动态表单,允许用户添加/删除文本字段。虽然我可以毫无问题地添加文本字段,但我在删除特定文本字段时遇到了困难。

每当我添加其他文本字段(假设总共 5 个),并尝试删除除第一个字段之外的任何一个文本字段(假设删除字段 3)时。所有这些都消失了,就像页面重新加载一样。就好像我的 jQuery 代码在按下“删除字段”时没有运行。

<form>
...
<div id="answers">
<div class="form-group" id="option1">
<div class="col-xs-11 col-sm-9 col-md-6">
<input class="form-control" id="answer" placeholder="Answer option">
</div>
<div class="col-xs-1 col-sm-1 col-md-1" style="line-height:36px;">
<a href="" class="remove">Remove Field</span></a>
</div>
</div>
</div>
...
</form>

<div>
<a href="" id="add">Add another field</a>
</div>

jQuery

    <script>
$(document).ready(function() {

$( "#add" ).on( "click", function(event) {
event.preventDefault();
var options = $('#answers .form-group').length + 1;
$( "#answers div:first" ).clone()
.attr('id', 'option' + options)
.appendTo( "#answers" );

});

$( ".remove" ).on( "click", function(event) {
event.preventDefault();
$(this).closest(".form-group").remove();
});


});
</script>

最佳答案

而不是这个:

$( ".remove" ).on( "click", function(event) {

试试这个:

$(document).on("click", ".remove", function(event) {

关于javascript - jQuery .remove() 不适用于动态表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18837533/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com