使用 jquery 对附加的 DOM 元素进行操作

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>

之后，我通过 jQuery 的 append() 方法动态添加额外的集合，集合如下所示，它们都有一个类 .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);
             }
        });
    })
})