Question

使用Symfony，我为我的收藏创建了一个表单和表单模板：

{% block _training_versions_entry_dates_widget %}
    ...

    <script type="text/javascript">
        var datesCount = {{ form|length }};

        $(function () {
            $('#add-another-email').click(function(e) {
                ...
            });
        });
    </script>
{% endblock %}

但我有这个错误：未捕获的ReferenceError：$未定义

我在base.html.twig中加载Jquery：

<body>
    {% block body %}{% endblock %}
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="{{ asset('/js/app.js') }}"></script>
    {% block javascripts %}{% endblock %}
</body>

我认为因为我的主题是在Jquery之前调用的，但我不想在我的<head>中移动jquery。你能救我吗？

Answer 1

你的js代码必须在jquery加载后调用。所以你可以在你的布局中做这样的事情，在all()标签之前为js代码添加一个块：

<强> layout.html.twig ：

</body>

然后，在您的模板中，将您的js写在{% block javascripts_footer %} <script src="{{ asset('vendor/jquery/jquery.min.js') }}"> {% endblock %} </body> </html>块中，而不是javascripts_footer块中：

content

Answer 2

你需要将你的功能包裹在$(document).ready()或$(window).load()中试试这个：

$(document).ready(){
    var datesCount = {{ form|length }};

    $(function () {
       $('#add-another-email').click(function(e) {
           ...
        });
    });
});

Answer 3

假设块_training_versions_entry_dates_widget是块body的子块，则在加载jQuery之前执行内联JavaScript。要么将内联JavaScript移到jQuery源代码下面，要么像你已经描述过的那样将它放在头部。

您可能希望将{{ form|length }}设置为数据属性，稍后通过JavaScript获取它。这样你就不需要内联JavaScript。

$(function () {    
    var datesCount = $('#add-another-email').attr('data-form-length');
    $('#add-another-email').click(function(e) {
        ...
    });
});

Symfony和Jquery：$未定义

3 个答案: