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

使用它来覆盖被克隆的表单，每次创建一个新表单时添加实例。如果指定，这应该是一个 jQuery 选择器。

通过设置此值，您可以通过加载模板来覆盖整个表单元素。这就是您收到 Cannot read property 'createDocumentFragment' of null 错误的原因，jQuery 找不到 .formset_row 元素，因为您通过用模板覆盖它来删除它。通过将 formTemplate 属性设置为 null，插件被指示使用已经存在的元素（也就是不覆盖已经存在的元素）而不是模板（也就是用模板）。

我希望这可以为您解决问题。 :D

django 中的 Jquery：未捕获的类型错误：无法读取 null 的属性“createDocumentFragment”

1 个答案: