Django 模板内联 jQuery 不工作

Question

尝试在我的模板中使用内联 jQuery，以便我可以在以后的 AJAX 调用中使用 django url 标签。但是我无法让 javascript 工作。在我的子页面中，我扩展了我的索引页面，其中包含我所有的 javascript 和 jQuery 库。

{% extends "subpage.django" %}


{% block content %}
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

    <script>
    $("#dialog").hide();
    $(".delete").click(function(){
            alert("clicked!");
     });  

    </script>

    {% if graph %}
        <h3> {{ graph.name }} </h3>
       {% url 'graphImage' graph.id as the_graph %}
        <img src="{{the_graph}}" alt="{{the_graph}}"/>



        <a class="button delete" id="{{ graph.id }}" href="#">Delete</a>


        <div id="dialog" title="Confirm delete">Are you sure?</div>


    {% endif %}
{# need to add object.id to dialog in javascript #}
{% endblock  %}

进行了一些编辑。将脚本放在块内容中，以便在显示源代码时立即显示。但是仍然不起作用。我现在使用 google api 包含了 jQuery 源代码。但是内联脚本仍然不起作用。奇怪的是，如果我在控制台中输入它，它可以完美地工作，只是不在这里！我知道我错过了什么！

Answer 1

好的，我解决了！我的第一个问题是由用户 Paul Tomblin 解决的（抱歉，我不知道如何添加你，而且我没有足够的代表来支持你的评论）。我没有意识到我的子页面不会包含 jQuery。出于某种原因，我认为它会继承它，但在这种情况下，Django 不会那样工作。

其次，我没有添加 $(document).ready(function(){});因此，当页面加载时，它不会 "run" 或 "intialize" 脚本。文档就绪函数将运行一旦文档准备好运行 JavaScript 如下所述： http://learn.jquery.com/using-jquery-core/document-ready/

这是我更新后的代码：

{% extends "subpage.django" %}

{# once jQuery works, can do deleteGraph ajax requests #}

{% block content %}
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function(){
        $("#dialog").hide();
        $(".delete").click(function(){
            alert("clicked!");
        });
    });
</script>
    {% if graph %}
        <h3> {{ graph.name }} </h3>
       {% url 'graphImage' graph.id as the_graph %}
        <img src="{{the_graph}}" alt="{{the_graph}}"/>


        <a class="button delete" id="{{ graph.id }}" href="#">Delete</a>


        <div id="dialog" title="Confirm delete">Are you sure?</div>


    {% endif %}
{# need to add object.id to dialog in javascript #}
{% endblock  %}

Answer 2

<script type="text/javascript" src="{% static 'mag/js/jquery-ui.js'%}"></script>

<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 9000,
        values: [ 50, 6000 ],
        slide: function( event, ui ) {  
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });

    $( "#amount" ).val( "$" + 
            $( "#slider-range" ).slider( "values", 0 ) + " - $" 
            + $( "#slider-range" ).slider( "values", 1 ) );

    });//]]>  

</script>

Django 模板内联 jQuery 不工作

Django template inline jQuery not working

javascript

python

django

jquery

django-templates