Django模板内联jQuery不起作用

Posted 2023-02-24

【中文标题】Django模板内联jQuery不起作用

【英文标题】：Django template inline jQuery not working

【发布时间】：2015-03-29 06:29:27

【问题描述】：

尝试在我的模板中使用内联 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" />



        <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 apis 包含了 jQuery 源代码。但是内联脚本仍然不起作用。奇怪的是，如果我在控制台中输入它，它就可以完美地工作，只是不在这里！我知道我错过了什么！

【问题讨论】：

你必须在每个页面上包含jQuery，而不仅仅是索引页面。

我明白了，所以我不能只从已经调用它的索引页面扩展！说得通。非常感谢！

是的，成功了！我可以在开发者控制台的源代码中看到它。但是内联脚本仍然不起作用。我将编辑帖子以更新问题！

【参考方案1】：

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

其次，我没有添加 $(document).ready(function());因此，当页面加载时，它不会“运行”或“初始化”脚本。 一旦文档准备好运行 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" />


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

【讨论】：

您可以通过扩展基本页面来包含 jQuery，但如果没有看到该页面，我们无法确定您可能哪里出错了。

是的，使用一个基本页面来扩展它。哇！ 3年后，我仍然记得如何解决这个基本问题哈哈。真棒！

【参考方案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>