Django模板内联jQuery无法正常工作 [英] Django template inline jQuery not working
问题描述
尝试在模板中使用内联jQuery,以便以后可以在AJAX调用中使用Django url标签. 但是我无法使JavaScript正常工作.在我的子页面中,我扩展了索引页面,其中包含我的所有JavaScript和jQuery库.
Trying to get inline jQuery in my template working so that I can use django url tags in AJAX calls later. But I can't get the javascript to work. In my subpage I extend my index page which has all my javascript and jQuery libraries.
{% 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源.但是内联脚本仍然不起作用.奇怪的是,如果我在控制台中输入它,那么它就可以完美地工作了,只是不在这里!我知道我想念什么!
Made some edits. Put script in block content so it shows now when showing the source code. Still doesnt work however. I now included the jQuery source using google apis. But the inline script still doesn't work. What is strange is that if I type it out in the console it works perfectly just not here! I know I am missing something!
推荐答案
好的,我解决了! 我的第一个问题是由用户Paul Tomblin解决的(很抱歉,我不知道该如何添加您,并且我没有足够的代表来支持您的评论).我没有意识到我的子页面将不包含jQuery.由于某种原因,我认为它会继承该属性,但是在这种情况下,Django无法那样工作.
Alright so I solved it! My first problem was solved by user Paul Tomblin (sorry I don't know how to add you and I don't have enough rep to upvote your comment). I didn't realize that my subpage wouldn't include jQuery. For some reason I thought it would inherit that, but Django in this case doesn't work like that.
第二,我没有添加$(document).ready(function(){});因此,在加载页面时,它不会运行"或初始化"脚本. 一旦文档准备好运行JavaScript,文档就绪功能就会运行,如下所示: http://learn.jquery.com/using-jquery-core/document-准备好/
Secondly, I didn't add the $(document).ready(function(){}); So when the page loaded it wouldn't "run" or "intialize" the script. The document ready function will run once the document is ready to run the JavaScript as stated here: 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 %}
这篇关于Django模板内联jQuery无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!