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

Posted 2023-05-09

【中文标题】使用 jquery 对附加的 DOM 元素进行操作

【英文标题】：Operations on appended DOM elements with jquery

【发布时间】：2018-01-17 00:32:07

【问题描述】：

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

<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);
             
        );
    )
)

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

【问题讨论】：

鉴于.questions 是一个不会引发submit 事件的div 元素，我不太确定您的代码是如何工作的。 @include('baseviews.panel_question') 是否附加了一个表单元素，然后导致 submit 事件在 DOM 中冒泡？

你可以摆脱.each循环：var valid = $(this).find(".radio:checked").length > 0;

您希望$(this).each() 做什么？ this 中只有一个元素，因此无需循环。

【参考方案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);
             
        );
    )
)

【讨论】：

修改后的代码最终还是可以工作的！我会记住 find() 用于未来案例的方法。非常感谢，您为我节省了大量时间！！！