时间戳

首页 > 解决方案 > Jquery 在 Django html 页面中不起作用

javascript - Jquery 在 Django html 页面中不起作用

问题描述

我正在尝试使用一些 Jquery 来突出显示表中的某些行。我的项目是使用 Django 构建的。当我导航到包含表格的页面时，我可以在日志中看到..

[16/May/2020 18:12:43] "GET /media/row.js HTTP/1.1" 304 0

所以我知道 JS 正在正确加载。我还可以查看我的来源，看看它是否正确链接。

我的桌子是：

<table class="table table-hover" id="myTable" style="table-layout: fixed; width: 100%">
            <thead>
                <tr class="clickable-row">
                    <th scope="col">Property</th>
                    <th scope="col">Expected Value</th>
                    <th scope="col">Actual Value</th>
                </tr>
            </thead>
            <tbody>
                <tr class="clickable-row">
                    {% for lis in json %}
                        <tr class="clickable-row">
                        {% for i in lis %}
                            <td style="word-wrap: break-word">{{i}}</td>
                        {% endfor %}
                        </tr>
                    {% endfor %}
                </tr>
            </tbody>
        </table>

而 Jquery 是：

$(document).ready(function() {
    $('#myTable').on('click', '.clickable-row', function(event) {
        $(this).toggleClass('active');
    });
});

我已经在 Codepen 中测试了 Jquery 实际上在我的项目之外工作。我尝试在需要它的页面中直接添加 Jquery。

我的检查页面如下所示：

 </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script src="/media/row.js"></script>
    </body>
</html>

标签： javascripthtmljquerydjango

解决方案

我通过在我的 base.html 中添加另一个脚本来解决这个问题

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

我不确定为什么会这样，以及这与我所拥有的有什么不同：

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

然后我决定从我现有的 Jquery 源中删除完整性和跨域，它可以工作。不知道出了什么问题，但我决定从我的所有外部文件中删除这些。

推荐阅读