DOM没有加载

Question

在下面的代码中，当我包含$（“body”）。on（）函数时，DOM根本不加载并且不会触发事件。当我单独尝试.ready（）中的函数时，它们仍然无法工作，即使是“alert（”Hi！“）”也不起作用。但是，当我取出所有函数并只留下警报（“嗨！”）警报被触发时，是否有任何已知的原因为什么包含其中一个或所有$（“body”）。on（）函数会停止DOM从装载？

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

随附的HTML代码

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