Uncaught ReferenceError: $ is not defined in twig template with jQuery import

Question

我的树枝视图中有这段代码：

{% extends "MyBundleBundle::layout.html.twig" %}
{% block content %}
    <div class="page-header">
        <h4>add an equipement</h4>
    </div
    <select id="selectEquipement">
          <option selected disabled>choose an equipement</option>
          <option value="{{ path('addEquipement1') }}">Equipement 1</option>
          <option value="{{ path('addEquipement2') }}">Equipement 2</option>
    </select>

    <div id="formEquipement"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#selectEquipement').change(function() {
                var url = $(this).val();
                $.get(url , {} , function(formulaire)  {
                    $("#formEquipement").html(formulaire);
                    })
                })
        });
    </script>
{% endblock %}

当我加载此视图的页面内容时，我的脚本第一行出现此错误 $(document).ready(function() { :

Uncaught ReferenceError: $ is not defined in twig template

我明白 jQuery 不是 load。当我在这个视图上添加 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 这个标签时，一切正常，我没有错误。

但是，实际上我已经在我的应用程序（本地）中导入了我需要的 jquery 脚本。所以在我的主要布局中，我导入了这样的脚本：

{% block script %}
                {% javascripts

                                '@MySpaceMyBundle/Resources/public/js/jquery-2.1.1.min.js'
                                '@MySpaceMyBundle/Resources/public/js/jquery-ui.min.js'
                                '@MySpaceMyBundle/Resources/public/js/bootstrap.min.js'
                                '@MySpaceMyBundle/Resources/public/js/applydataTables.js'
                                '@MySpaceMyBundle/Resources/public/js/jquery.form.min.js'
                                '@MySpaceMyBundle/Resources/public/js/jquery.dataTables.min.js'
                                '@MySpaceMyBundle/Resources/public/js/dataTables.colVis.min.js'
                                '@MySpaceMyBundle/Resources/public/js/jquery.sumoselect.min.js'
                                '@MySpaceMyBundle/Resources/public/js/main.js'
                                'http://cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js'%}
                                <script type="text/javascript" src="{{ asset_url }}"></script>
                {% endjavascripts %}
            {% endblock %}

有人知道为什么吗？我注意到自从我 将我的 symfony 应用程序升级 到 2.6 版本后，我有一些这样的错误。

此外，当我在我的应用程序中使用 Ajax 调用时，在 symfony 工具栏 中，Ajax 请求不像以前那样工作（没有通知），但是当我在浏览器的 网络选项卡中调试时 一切正常。

Answer 1

尝试替换：

$(document).ready(function() {

与

$(window).load(function() {

window.onload() 在所有元素（包括动态生成的（或包含的）元素）都已加载时晚于 document.ready() 触发。

编辑： 您可以尝试在页脚中 jQuery 代码之后移动您的代码吗？

正确的做法是创建一个单独的 .js 文件并在页脚中调用它，就在 jQuery 之后。