Javascript DOM未加载
在下面的代码中，当我包含$（“body”）.on（）函数时，DOM根本不会加载，也不会触发事件。当我单独尝试.ready（）中的函数时，它们仍然不起作用，甚至“警报（“Hi！”）也不起作用。但是，当我取出所有函数并只留下警报（“Hi！”）时，警报就会被触发，是否有任何已知的原因可以解释为什么包含其中一个或所有$（“body”）.on（）函数会停止加载DOMJavascript DOM未加载,javascript,jquery,dom,Javascript,Jquery,Dom,在下面的代码中，当我包含$（“body”）.on（）函数时，DOM根本不会加载，也不会触发事件。当我单独尝试.ready（）中的函数时，它们仍然不起作用，甚至“警报（“Hi！”）也不起作用。但是，当我取出所有函数并只留下警报（“Hi！”）时，警报就会被触发，是否有任何已知的原因可以解释为什么包含其中一个或所有$（“body”）.on（）函数会停止加载DOM <script src="http://code.jquery.com/jquery-latest.min.js"></s
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready( function(){
alert("Hi!");
$("body").on("click", ".sorter", function(event){
$('.row.replace').empty();
$('.row.replace').append("<br><br><br><br><p align='center'><img id='theImg' src='/media/loading1.gif'/></p><br><br><br><br><br><br><br><br>");
var sort = $(this).attr("name");
var filter = $('.select').find(":selected").attr("name");
//var csrftoken = getCookie('csrftoken');
$.ajax({
type: "POST",
url: "/filter_home/" + filter + "/" + sort + "/",
data: {'name': 'me', 'csrfmiddlewaretoken': '{% csrf_token %}'},
success : function(data) {
$('.row.replace').html(data);
//$('.row.replace').html("{% load endless %}{% paginate 6 dishes %}" + data + "<h2 align='center'>{% show_pages %}")
},
error : function(xhr,errmsg,err) {
alert(err);
}
}); //end ajax
return false;
}); //end onclick
$("body").on("change", ".select", function(event){
$('.row.replace').empty();
$('.row.replace').append("<br><br><br><br><p align='center'><img id='theImg' src='/media/loading1.gif'/></p><br><br><br><br><br><br><br><br>");
var filter = $(this).find(":selected").attr("name");
//var csrftoken = getCookie('csrftoken');
$.ajax({
type: "POST",
url: "/filter_home/" + filter + "/" + "TrendingNow" + "/",
data: {'name': 'me', 'csrfmiddlewaretoken': '{% csrf_token %}'},
success : function(data) {
$('.row.replace').html(data);
//$('.row.replace').html("{% load endless %}{% paginate 6 dishes %}" + data + "<h2 align='center'>{% show_pages %}")
},
error : function(xhr,errmsg,err) {
alert(err);
}
}); //end ajax
return false;
}); //end onchange
$("body").on("click", ".upvote", function(event){
var x = $(this).attr("name");
//var csrftoken = getCookie('csrftoken');
$.ajax({
type: "POST",
url: "/upvote/" + x + "/",
data: {'name': 'me', 'csrfmiddlewaretoken': '{% csrf_token %}'},
dataType: "json",
success : function(json) {
var y = "vote-count" + x;
$('i[class= "' + y + '"]').text(json.vote_count);
//flip button
$('.flip'+x).find('.card').toggleClass('flipped');
},
error : function(xhr,errmsg,err) {
alert("oops, something went wrong! Please try again.");
}
}); //and ajax
return false;
}); //end onclick
}); //end on ready
</script>
$（文档）.ready（函数（）{
警惕（“嗨！”）；
$（“正文”）。在功能（事件）上（“单击”和“.sorter”）{
$（'.row.replace'）.empty（）；
$（'.row.replace'）。追加（“
”；
var sort=$（this.attr（“name”）；
var filter=$（'.select'）.find（“：selected”）.attr（“name”）；
//var csrftoken=getCookie（'csrftoken'）；
$.ajax({
类型：“POST”，
url:“/filter\u home/”+filter+“/”+sort+“/”，
数据：{'name'：'me'，'csrfmiddlewaretoken'：{%csrf_token%}，
成功：功能（数据）{
$（'.row.replace'）.html（数据）；
//$（'.row.replace'）.html（“{%load%}{%paginate 6碟%}”+数据+“{%show_pages%}”）
},
错误：函数（xhr、errmsg、err）{
警惕（err）；
}
})；//结束ajax
返回false；
})；//结束onclick
$（“body”）。在（“更改”，“选择”，函数（事件）{
$（'.row.replace'）.empty（）；
$（'.row.replace'）。追加（“
”；
var filter=$（this.find（“：selected”）.attr（“name”）；
//var csrftoken=getCookie（'csrftoken'）；
$.ajax({
类型：“POST”，
url:“/filter\u home/”+filter+“/”+“趋势现在”+“/”，
数据：{'name'：'me'，'csrfmiddlewaretoken'：{%csrf_token%}，
成功：功能（数据）{
$（'.row.replace'）.html（数据）；
//$（'.row.replace'）.html（“{%load%}{%paginate 6碟%}”+数据+“{%show_pages%}”）
},
错误：函数（xhr、errmsg、err）{
警惕（err）；
}
})；//结束ajax
返回false；
})；//一改变就结束
$（“body”）。在功能（事件）上（“单击”和“.upvote”）{
var x=$（this.attr（“name”）；
//var csrftoken=getCookie（'csrftoken'）；
$.ajax({
类型：“POST”，
url:“/upvote/”+x+“/”，
数据：{'name'：'me'，'csrfmiddlewaretoken'：{%csrf_token%}，
数据类型：“json”，
成功：函数（json）{
var y=“计票”+x；
$（'i[class=“”+y+“]”）文本（json.vote_count）；
//翻转按钮
$（'.flip'+x）.find（'.card'）.toggleClass（'fliped'）；
},
错误：函数（xhr、errmsg、err）{
警报（“哎呀，出了问题！请再试一次。”）；
}
})；//还有ajax
返回false；
})；//结束onclick
}); //准备就绪后结束
<div class="widewrapper weak-highlight">
<div class="container content">
<h3 align="center"> Choose Box: </h3>
<select class="select">
<option value="All" name="All">All</option>
<!--<option value="People You Follow" name="PeopleYouFollow">People You Follow</option>-->
{% for box in boxes %}
<option value="{{ box.name }}" name="{{ box.name }}">{{ box.name }}</option>
{% endfor %}
</select>
<div class="row">
<div class="span12">
<div class="showroom-controls">
<div class="links">
<a href="#" class="sorter" name="TrendingNow">Trending Now</a>
<i class="verticalSeparator"></i>
<a class="sorter" name="RecentlyAdded">Recently Added</a>
<i class="verticalSeparator"></i>
<a href="#" class="sorter" name="AllTimeMostUpvoted">All Time Most Upvoted</a>
</div>
</div>
<div class="row replace" id="entries">
{% for dish, liked in dishes %}
<div class="showroom-item span3">
<div class="thumbnail">
<a href="{{ dish.recipe_url }}" target="_blank"><img class="food_pic" src="/media/{{ dish.image }}" alt="Portfolio Image"> </a>
<div class="span3c">
<a href="{{ dish.recipe_url }}" target="_blank"><b> {{ dish.name }} </b> </a>
</div>
<div class="span3d">
posted by <a href="/profile/{{ dish.creator }}"><b> {{ dish.creator }}</b></a>
</div>
<div class="span3c">
<div class="btn-group">
<div class="flip flip{{ dish.id }}">
<div class="card">
{% if liked %}
<div class="face front">
<button type="button" class="btn btn-grove-one upvote" id="upvote" name="{{ dish.id }}">Upvoted <i class="glyphicons thumbs_up"><i></i></i><i class="vote-count{{ dish.id }}">{{ dish.other_votes }}</i></a></button>
</div>
<div class="face back">
<button type="button" class="btn btn-grove-two upvote" id="upvote" name="{{ dish.id }}">Upvote <i class="glyphicons thumbs_up"><i></i></i><i class="vote-count{{ dish.id }}">{{ dish.other_votes }} </i></a></button>
</div>
{% else %}
<div class="face front">
<button type="button" class="btn btn-grove-two upvote" id="upvote" name="{{ dish.id }}">Upvote <i class="glyphicons thumbs_up"><i></i></i><i class="vote-count{{ dish.id }}">{{ dish.other_votes }} </i></a></button>
</div>
<div class="face back">
<button type="button" class="btn btn-grove-one upvote" id="upvote" name="{{ dish.id }}">Upvoted <i class="glyphicons thumbs_up"><i></i></i><i class="vote-count{{ dish.id }}">{{ dish.other_votes }}</i></a></button>
</div>
{% endif %}
</div>
</div>
</div>
<div class="btn-group">
<a href="/dish/{{ dish.id }}"> <button type="button" class="btn btn-grove-two"><i class="glyphicons comments"><i></i></i><fb:comments-count href=http://www.feastbox.com/dish/{{ dish.id }}/></fb:comments-count></button></a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
选择框：
全部的
{框中框的%s}
{{box.name}
{%endfor%}
{菜肴%，喜欢菜肴%}
邮寄人
{%if%}
向上投票{dish.other_vows}
向上投票{dish.other_vots}
{%else%}
向上投票{dish.other_vots}
向上投票{dish.other_vows}
{%endif%}
{%endfor%}