Question

我有一个表格，其中有一组字段正在加载

<form id="questionsForm" method="post" action="/author">
    {{csrf_field()}}
    <div class="row questions" id="question-0">
        <div class="col-md-12">
            @include('baseviews.panel_question')
        </div>
    </div>
    <button type="submit" id="saveQuiz" class="btn btn-primary">Save</button>
</form>

之后，我通过append()方法jQuery动态添加额外的集合，这些集合以下列方式查找，并且所有集合都有一个类.questions：

<div class="row questions" id="question-0">
    <div class="col-md-12">
    @include('baseviews.panel_question')
</div>

在表单提交上，我想访问所有这些集合，以便将特定规则应用于表单字段：

$('#questionsForm').on('submit', '.questions', function (e){
    e.preventDefault();
    var valid = false;
    $(this).each(function () {
        var set = $(this).find('.radio');
        set.each(function () {
            if($(this).is(':checked')){
                 valid = true;
                 console.log(valid);
             }
        });
    })
})

但是这段代码只访问第一组字段，无论后来追加了多少字段。我该如何解决并选择所有这些？

Answer 1

您不需要在.questions div上进行事件委派，并且只在表单元素上触发提交事件，请执行以下操作：

$('#questionsForm').on('submit', function (e){
    e.preventDefault();
    var valid = false;
    $(this).find('.questions').each(function () {//get all the questions from the form
        var set = $(this).find('.radio');
        set.each(function () {
            if($(this).is(':checked')){
                 valid = true;
                 console.log(valid);
             }
        });
    })
})

使用jquery

1 个答案: