javascript - django - 在包含的模板中时 javascript 不工作

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

刚遇到同样的问题。为了解决它，有必要做接下来的事情:

1. 在 base.html 添加:

   • 所有基本脚本，比如我们

   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

   • 添加 block ，例如:

   {% block extrascripts %}{% endblock %}

2. 把你手写的脚本放到/static/js/hand_made.js

3. 在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 中提供