使用jQuery嵌套动态生成的表单

我正在创建一个调查生成器。我希望能够将多项选择答案添加到动态生成的表单中。如下图所示

目前，添加问题和删除问题非常有效。问题在于，添加和删除答案只适用于第一个问题

以下是我的html部分和脚本：

@extends（'app'）
@节（“内容”）
{！！Form:：model（$survey=new\App\survey，['url'=>'surveys']）
创建新调查
{！！Form:：label（'title'，'title:'）
{！！Form:：text（'title'，null，['class'=>'Form control']）

{！！Form:：label（'问题'，'问题：'）
{！！Form:：text（'questions[]，null，['class'=>'Form control']）
添加答案
{{--动态添加的应答框--}}
再补充一个问题
{！！表单：：提交（'Add Survey'，['class'=>'btn btn primary Form control']）
{！！Form:：close（）！！}
@端部
@节（“页脚”）
//用于添加问题的Jquery
$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“#输入_字段_wrapp”）；//字段包装器
var add_button=$（“#add_question_button”）；//添加按钮ID
var x=1；//初始文本框计数
//添加一个问题
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x'Form control']）！！}Add-AnswerRemove”）；
}
});
$（包装器）。在（“单击“，”.remove_字段）上，函数（e）{//用户单击remove text
e、 preventDefault（）；$（this.parent（）.parent（'div'）.remove（）；
x--；
})
});
//用于添加问题答案的Jquery
$（文档）.ready（函数（）{
var max_fields=4；//允许的最大输入框数
var wrapper=$（“.input\u answers\u fields\u wrapp”）；//字段包装器
var add_button=$（“.add_answer_button”）；//添加按钮ID
var x=1；//初始文本框计数
//添加答案
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x'Form control']）！！}Remove'）；
}
});
//删除字段
$（包装器）。在（“单击”，“删除”字段）上，函数（e）{
e、 preventDefault（）；$（this.parent（）.parent（'div'）.remove（）；
x--；
})
});
@endsection

我认为这是您的问题：调用

$（“.input\u answers\u fields\u wrap”）

只在第一次执行查询，因此您的单击处理程序：

$(wrapper).on("click",".remove_field", function(e){

只对第一个渲染的对象有效

您应该使用动态添加的

.input\u answers\u field\u wrap

之外的内容，并在dom中使用更高级别的内容，如：

$("body").on("click",".remove_field", function(e){

---

编辑：请注意，在使用辅助选择器arg时，您的头部位于正确的位置，但是第一个

。input\u answers\u fields\u wrap

是唯一已渲染的，因此它是唯一将应用于的。我想这是您的问题：调用

$（“.input\u answers\u fields\u wrap”）

只在第一次执行查询，因此您可以单击此处的处理程序：

$(wrapper).on("click",".remove_field", function(e){

只对第一个渲染的对象有效

您应该使用动态添加的

.input\u answers\u field\u wrap

之外的内容，并在dom中使用更高级别的内容，如：

$("body").on("click",".remove_field", function(e){

编辑：请注意，在使用辅助选择器arg时，您的头部位于正确的位置，但第一个

。input\u answers\u fields\u wrap

是唯一已渲染的头部，因此它是唯一将应用于的头部