Uncaught ReferenceError：使用jQuery导入未在树枝模板中定义$

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() {

未捕获的ReferenceError：在树枝模板中未定义$

我了解jQuery无法加载 。 当我在此视图上添加<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版本以来，我就遇到了类似的错误。

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

Answer 1

尝试更换：

$(document).ready(function() {

同

$(window).load(function() {

当所有元素（包括动态生成的元素（或包含的元素））均已加载时， window.onload()会比document.ready()晚触发。

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

正确的方法是拥有一个单独的.js文件，并在jQuery之后的页脚中对其进行调用。