Question

我正在尝试为我的symfony平台设置一个简单的jquery。只是尝试实现这个http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p，看看是否一切正常。

base.html.twig

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>{% block title %}TEST JQUERY{% endblock %}</title>
    {% block stylesheets %}{% endblock %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
    {% block body %}{% endblock %}
    {% block javascripts %}{% endblock %}
</body>
</html>

index.html.twig

{% extends '::base.html.twig' %}

{% block body %}

    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $("p").hide();
            });
        });
    </script>


<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>


{% endblock %}

当我在页面上查看源代码时，结构看起来很好但是jquery没有被执行。

Answer 1

您所包含的jQuery在Google的CDN上不存在

改为使用<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>。

如果您想要版本1.9.1，请从jquery.com this link获取

Answer 2

更改jquery函数并尝试：

<script type="text/javascript">
    $(document).ready(function(){
        $("button").live('click', function(){
            $("p").hide();
        });
    });
</script>

更新

由于 rrikesh 指针输出，因为在v1.7之后不推荐使用live，你可能想要使用它：

<script type="text/javascript">
    $(document).on("click", "button", function (){
        $("p").hide();
    });
</script>

Answer 3

这可能是一个更好的解决方案：

<script src="{{ asset('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js') }}"></script>
<script><window.jQuery || document.write('<script src=\"\{\{ asset(\'../app/Resources/public/js/vendor/jquery-1.9.1.min.js\') \}\}\"><\/script>')</script>

将jquery-1.9.1.min.js文件下载到app/Resources/public/js/vendor/目录。

通过这种方式，客户端始终获取源。

使用Symfony进行jquery设置

3 个答案:

更新