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

Question

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

目前，添加问题并删除它们非常有效。问题是添加和删除答案仅适用于第一个问题。

这是我的html partial和脚本：

＆＃13;

＆＃13;

@extends('app')

@section('content')
    {!! Form::model($survey = new \App\Survey, ['url' => 'surveys']) !!}
    <h1 style="text-align:center">Create a new Survey</h1>

        <div class="form-group">
            {!! Form::label('title', 'Title:') !!}
            {!! Form::text('title', null, ['class' => 'form-control']) !!}
        </div>

    <hr/>

    <div id="input_fields_wrap">
        <div class="form-group">
            {!! Form::label('question', 'Question:') !!}
            <div class="input-group">
                {!! Form::text('questions[]', null, ['class' => 'form-control']) !!}
                <span class="input-group-btn"><button class="btn btn-default btn-info add_answer_button" type="button">Add Answer</button></span>
            </div>
        </div>
        <div class="input_answers_fields_wrap" style="margin-left:40px;">
            {{--Dynamically added answer boxes--}}
        </div>
    </div>
    <div id="add_question_button" class="btn btn-primary" style="margin-bottom:15px" type="text">Add another Question</div>

    <div class="form-group">
        {!! Form::submit('Add Survey', ['class' => 'btn btn-primary form-control']) !!}
    </div>
    {!! Form::close() !!}

@endsection

@section('footer')

    <script>
        // Jquery for adding a question
        $(document).ready(function() {
            var max_fields      = 10; //maximum input boxes allowed
            var wrapper         = $("#input_fields_wrap"); //Fields wrapper
            var add_button      = $("#add_question_button"); //Add button ID

            var x = 1; //initial text box count
            // Add a question
            $(add_button).click(function(e){ //on add input button click
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                    x++; //text box increment
                    $(wrapper).append('<div class="form-group"><div class="input-group" style="margin-bottom: 15px;">{!! Form::text('questions[]', null, ['class' => 'form-control']) !!}<span class="input-group-btn"><button class="btn btn-default btn-info add_answer_button" type="button">Add Answer</button><button class="btn btn-default btn-danger remove_field" type="button">Remove</button></span></div></div><div class="input_answers_fields_wrap" style="margin-left:40px;"> </div>');
                }
            });

            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent().parent('div').remove();
                x--;
            })
        });

        // Jquery for adding an answer to a question
        $(document).ready(function() {
            var max_fields      = 4; //maximum input boxes allowed
            var wrapper         = $(".input_answers_fields_wrap"); //Fields wrapper
            var add_button      = $(".add_answer_button"); //Add button ID

            var x = 1; //initial text box count
            // Add an answer
            $(add_button).click(function(e){ //on add input button click
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                    x++; //text box increment
                    $(wrapper).append('<div class="input-group" style="margin-bottom: 15px;">{!! Form::text('answers[]', null, ['class' => 'form-control']) !!}<span class="input-group-btn"><button class="btn btn-default remove_field" type="button">Remove</button></span></div>');
                }
            });

            // Remove a field
            $(wrapper).on("click",".remove_field", function(e){
                e.preventDefault(); $(this).parent().parent('div').remove();
                x--;
            })
        });
    </script>

@endsection

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为这是您的问题：对$(".input_answers_fields_wrap")的调用仅在第一次进行查询，因此您的点击处理程序位于此处：

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

仅适用于第一个呈现的内容。

你应该使用动态添加的.input_answers_field_wrap以外的东西，并在dom中使用更高的东西：

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

编辑：请注意，在使用辅助选择器arg时，你的头部位于正确的位置，但是第一个.input_answers_fields_wrap是唯一一个已经渲染的，因此它是唯一适用于它的人。