javascript - Django 中的 jQuery : Uncaught TypeError: Cannot read property 'createDocumentFragment' of null

Question

对于我的生活，我无法弄清楚这段代码有什么问题。它曾经在早期版本中工作，在我重新排列页面底部的 javascript 后，它无法正常工作。它不断给我这个错误:

抛出错误的行如下:$('.formset_row').formset({这是the jquery plugin我用过的。这曾经完美地工作，直到像昨天一样，当我可能触及我不应该触及的东西时。

    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

    <!-- Semantic UI -->
    
   
    
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script src="/static/js/script.js"></script>
    
    
    <script>
        /*$('body').on('focus',".my-date-picker", function(){
            $('.my-date-picker').datetimepicker({
                format: 'DD/MM/YYYY',
                ignoreReadonly: true,
                showTodayButton: true
            });
        });*/
    </script>
    <script src="/static/formset/jquery.formset.js"></script>
    <script type="text/javascript">
        $('.formset_row').formset({
            addText: '<div style="color: #34C6AA;" class="my-2 text-center"><span class="oi oi-plus"></span> Add Education</div>',
            deleteText: '<div style="color: #f4816e; text-decoration: none;" class="my-2 text-center"> <span class="oi oi-x"></span> Remove Education</div> ',
            prefix: 'educations'
        });
    </script>



</body>

EDIT1:根据要求，我共享使用类表单集的代码

{% extends '_base.html' %}
{% load crispy_forms_tags %}
{% load static %}



{% block content %}
</br>
    <h1 class="display-4 text-responsive">Edit your education information</h1>
<h3 class="display-6 text-muted">This will be visible on your profile</h3>
<p><span style="color: #f4816e;">IMPORTANT:</span></p>
<ul>
    <li>Leave the End Date field empty if you are currently enrolled in your school/university</li>
</ul>
<hr>    
<form method="POST" action=""> 
    {% csrf_token %} 

    {{ formset.management_form }} {# This is necessary when using formsets  #}
        {% for form in formset  %}
            
            {{ form.media }} {# This shit is responsible for showing the datepicker #}
            
            
            <div class="formset_row">
            <div class="row">
                    
                    {% if forloop.first %}
                            {% for hidden in form.hidden_fields %}
                                {{ hidden }}
                            {% endfor %}
                    {% endif %}
                    {% for field in form.visible_fields %}
                        
                            {% if field.name == "start_date" or field.name == 'end_date' %}
                                {% if  field.name == 'end_date' %}
                                    <div class="col-lg-2 col-sm-12 col-md-1">
                                        {{ field.label }} 
                                        {{ field }} </br>
                                        
                                    </div>
                                {% else %}
                                    <div class="col-lg-2 col-sm-12 col-md-1">
                                        {{ field.label }}
                                        {{ field }} </br>
                                    </div>
                                {% endif %}
                            {% elif field.name != 'DELETE' %}
                                <div class="col-lg-4 col-sm-12 col-md-4">
                                    {{ field.label }}
                                    {{ field }} </br>
                                </div>
                            {% else %}
                                {{ field }}
                            {% endif %}
                        
                        
                    {% endfor %}
            </div>
            </div>
        {% endfor %}
    
    <div class="d-block d-sm-none ">
        <input type="submit" name="save_and_next" value="Save and continue to next step" class="btn btn-success btn-block">
        <input type="submit" name="save_and_profile"value="Save and go to profile" class="btn btn-outline-info btn-block">
        <a href="{% url 'recruitment:update_coach_prof_exp' %}" class="btn btn-light btn-block">Skip step</a>
    </div>
    <div class="d-none d-md-block ">
        <input type="submit" name="save_and_next" value="Save and continue to next step" class="btn btn-success">
        <input type="submit" name="save_and_profile"value="Save and go to profile" class="btn btn-outline-info">
        <a href="{% url 'recruitment:update_coach_prof_exp' %}" class="btn btn-light">Skip step</a>
    </div>

    
</form>
<script>
    $('body').on('focus',".my-date-picker", function(){
        $(this).datetimepicker({
            format: 'DD/MM/YYYY',
            ignoreReadonly: true,
            showTodayButton: true
        });
    });
</script>
<script src="{% static 'formset/jquery.formset.js' %}"></script>
<script type="text/javascript">
    $('.formset_row').formset({
        addText: '<div style="color: #34C6AA;" class="my-2 text-center"><span class="oi oi-plus"></span> Add Education</div>',
        deleteText: '<div style="color: #f4816e; text-decoration: none;" class="my-2 text-center"> <span class="oi oi-x"></span> Remove Education</div> ',
        prefix: '{{ formset.prefix }}'
    });
</script>

{% 端块内容 %}
EDIT2:我在 insertDeleteLink = function(row) { 之后在 jquery 插件中添加了 console.log(row)

EDIT3:从 jquery 插件 添加第 76 行(及以上)的内容

最终编辑

最后，我通过查找插件的更新分支并替换整个代码来解决该问题。合并后，我发现区别在于 jquery 插件设置。
我真的对 jquery 一无所知，我无法真正解释为什么早些时候它不起作用而现在它起作用了。我能说的是，在插件设置的第二行，当 formTemplate属性是 $.data它没有用。现在是 null它有效。
如果有人可以在这里为我自己和其他人写一篇关于为什么会出现这个错误的解释(而且它是突然出现的)，我将奖励他们。
这个问题让我很苦恼，虽然现在我已经克服了它，我感到很欣慰，但我还是想多了解一些发生了什么，以免下次我措手不及。此外，我相信许多其他人会从中受益，因为这个特定的插件正在被数百个甚至数千个网络上的 Django 网站使用。

Answer 1

正如您所说，设置 formTemplate属性为 null 导致您的表单工作。
从插件的文档:

formTemplate

Use this to override the form that gets cloned, each time a new forminstance is added. If specified, this should be a jQuery selector.

通过设置此值，您可以通过加载模板来覆盖整个表单元素。这就是您获得 Cannot read property 'createDocumentFragment' of null 的原因错误，jQuery 找不到 .formset_row元素，因为您通过用模板覆盖它来删除它。通过设置 formTemplate属性(property)到 null ，插件被指示使用已经存在的元素(也就是不覆盖已经存在的元素)而不是模板(也就是用模板覆盖已经存在的元素)。
我希望这为您解决了问题。 :D