即使在使用empty(）清除DOM之后，jquery函数也会执行两次

Jquery函数执行了两次(如果我先执行，然后再执行(。在LoginMenu.jsp的onLoad中，WorkOrder.jsp加载在任何id中。

当WorkOrder.jsp加载时，它将加载WorkOrders.jsp 中定义的schedule.jsp选项卡

当Schedule.jsp加载时，它会在时间表页面中获取记录并打印，该页面由两个引导下拉按钮和一个链接组成，在该链接上它会将您带到另一个页面。单击schedule.jsp中的一个链接，它清空anythingdiv并加载SubcaseMain.jsp.

Subcasemain.jsp包含后退按钮，点击后清空任意div并加载WorkOrder.jsp。所以当我点击schedule.jsp中的链接时，它会两次点击WorkOrder.jsp中的(.delete(函数并加载该函数存在的模态X次数。我已经检查了div，它已经清空了。那么，为什么函数要执行多次呢？

标记在调用empty方法后是清楚的，但它仍然在内存中，我检查了firebug脚本选项卡，它在其中创建了多个javascript源。为什么即使调用了空方法，js也没有被清除？？

LoginMenu.jsp

        <link href="css_harish/demo.css" rel="stylesheet" />
        <link href="css_harish/jquery.mmenu.all.css" rel="stylesheet" />
        <link href="css_harish/bootstrap-datetimepicker.min.css" rel="stylesheet" />
        <link href="css_harish/bootstrap-paper.min.css" rel="stylesheet" />
        <script src="js_harish/jquery-2.2.4.min.js"></script>
        <script src="js_harish/jquery.mmenu.all.min.js"></script>
        <script src="js_harish/bootstrap.min.js"></script>
        <script src="js_harish/modernizr.js"></script>
        <script src="js_harish/bootbox.min.js"></script>
        <script src="js_harish/validator.js"></script>
        <script src="js_harish/moment.min.js"></script>
        <script src="js_harish/bootstrap-datetimepicker.min.js"></script>
        <link href="css_harish/Loader.css" rel="stylesheet" />
    <div class="content" id="whatever"></div>  
    $(document).ready(function () {
           $(function () {
               $("#whatever").empty();
               $("#whatever").load("WorkOrders.jsp");
           });
       });    

WorkOrders.jsp

$(document).ready(function() {
    $("#schedule .showbox").show();
    $("#schedule").load("Schedule.jsp");
});
$(document).on("click", ".delete", function(e) {
        //delete the appointment
        e.preventDefault();
        alert("delete");
        $("#edit_objid").val($(this).data('id'));
        var objid = $("#edit_objid").val();
        bootbox.confirm({
            title: 'Delete Appointment',
            message: 'Are you sure you want to delete this Appointment. ?',
            buttons: {
                'cancel': {
                    label: 'Cancel',
                    className: 'btn-default pull-left'
                },
                'confirm': {
                    label: 'Delete',
                    className: 'btn-danger pull-right'
                }
            },
            callback: function(result) {
                if (result) {
                    url="deleteAppointment.action?objid="+objid;
                    $.ajax({
                        type: 'POST',
                        cache: false,
                        async: true,
                        url: url,
                        dataType: 'json',
                        success: function(data) {
                            if(typeof data['EXCEPTION']!="undefined"){
                                bootbox.alert("Exception Occurs while deleting the appointment :"+data.EXCEPTION);
                            }else{
                                bootbox.alert("Deleted Successfully."); 
                                $("#containerid").html('');
                                $("#containerid").html($(".showbox").html());
                                getSchedule();
                            }
                        }
                    }); 
                }
            }
        });
    });  

Schedule.jsp

$(document).on("click", ".opensubcase", function() {
    var id_number=$(this).text();
    $("#whatever").empty();
    $("#whatever").load("SubCaseMain.jsp?id_number="+id_number);
});

SubcaseMain.jsp

    <span style="float:left" data-toggle="tooltip" data-placement="right" title="Go Back"><img
        style="float: left" class="back" src="back.png" width="35px"
        height="35px" /></span> 
$(document).on("click", ".back", function() {
    $("#whatever").empty();
    $("#whatever").load("WorkOrders.jsp");
});

$(document).one('click', '#clickOnce', function(){
  alert('clicked');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='clickOnce'>click me</button>

<div class="wrapper">wrap it up
  <button id="howdy">
    howdy
  </button>
  <div id="whatever">
    <div class='inside'>insidetop</div>
    <script>
      $(document).ready(function() {
        $('#howdy').on('click', function() {
          console.log('howdyclick from org');
        })
      });
    </script>
    <div class='inside'>inside</div>
  </div>
  <button id="test">
    test
  </button>
</div>

console.clear();
var testthing = "<scr"+"ipt>$(document).ready(function(){$('#howdy').on('click', function(){console.log('howdyclick from test');});});</scr"+"ipt> <div class='inside'>inside</div>";
$(document).ready(function() {
  $('#howdy').on('click', function() {
    console.log('howdyclick from outside');
  })
});
$('#test').on('click', function() {
  $('#whatever').empty();
  $('#whatever').html(testthing);
});

howdyclick from org
howdyclick from outside

howdyclick from org
howdyclick from outside
howdyclick from test