Question

我在django中有一个名为base.html的模板，它通过{% include 'gui/page.html' %}

调用另一个模板

在该模板中我有以下javascript，允许在设置<p>This text I will select all</p>

时选择整个文本字段

<script>
$(document).ready(function(){

     $('p').dblclick(function(e){

         $(this).selectText();
             e.preventDefault();

         });

         });
         jQuery.fn.selectText = function(){
             this.find('input').each(function() {
                if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) { 
                   $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
                }
            $(this).prev().html($(this).val());
        });
        var doc = document;
        var element = this[0];
            console.log(this, element);
            if (doc.body.createTextRange) {
                var range = document.body.createTextRange();
                range.moveToElementText(element);
                    range.select();
            } else if (window.getSelection) {
                var selection = window.getSelection();        
                var range = document.createRange();
                    range.selectNodeContents(element);
                    selection.removeAllRanges();
                    selection.addRange(range);
    }
};
</script>

如果我直接访问模板@ http://localhost/gui/page.html，则javascript可以正常运行，但如果我通过http://localhost/base.html访问该模板，则双击该字段无效。

我已经尝试在base.html中包含javascript，但仍然无法加载。在通过包含的模板进行调用时，django如何加载javascript？

Answer 1

Django不修改或加载模板中的任何javascript。它只会将其传递给输出。

Answer 2

刚刚遇到同样的问题。为了解决这个问题，有必要做下一件事：

在base.html中添加：
- 所有基本脚本，例如我们
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
- 添加块，例如：
{% block extrascripts %}{% endblock %}
将您手工制作的脚本放到/static/js/hand_made.js
在child模板中，包含的内容，即我们在{% include 'child_template.html' %}中使用的模板：
- 在顶部添加{% load staticfiles %}
- 在中间添加你的html
- 最后添加
{% block extrascripts %}<script type="text/JavaScript" src="{% static 'js/hand_made.js' %}"></script>{% endblock %}（由于某种原因，不能用漂亮的风格添加它。）

如果出于某些原因需要从模板向JS提供数据，则需要执行下一步：

{% block extrascripts %}
    <script>
        var my_var_1 = "{{ some_template_data.var_1 }}",
            my_var_2 = "{{ some_template_data.var_12 }}";
    </script>
    <script type="text/JavaScript" src="{%  static 'js/hand_made.js' %}"></script>
{% endblock %}

在这种情况下my_var_1和my_var_2将在hand_made.js

django - 在包含的模板中javascript无法正常工作

2 个答案: