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

Question

我的 Twig View 中有这段代码:

{% 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 %}

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

Uncaught ReferenceError: $ is not defined in twig template

我知道 jQuery 不是加载。当我添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>时这个 View 上的这个标签，一切正常，我没有错误。

但是，事实上我已经在我的应用程序(本地)中导入了我需要的 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 之后。