即使在使用empty（）清除DOM后，jquery函数仍执行两次

Question

Jquery函数正在执行两次（或者如果我继续前进然后再返回）。 在LoginMenu.jsp的onLoad中，WorkOrder.jsp以任何 id加载。

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

当Schedule.jsp加载时，它会获取记录并在计划页面中打印，该计划页面包含两个引导下拉按钮和一个链接，在该链接上它将带您到另一个页面。 单击schedule.jsp中存在的链接，它会清空任何 div并加载SubcaseMain.jsp。

Subcasemain.jsp包含单击后面的后退按钮，它会清空任何div并加载WorkOrder.jsp.so当我点击schedule.jsp中的链接时，它会转到WorkOrder.jsp中的单击（.delete）函数两次并加载模态X函数存在的次数。我检查了它被清空的div。为什么函数执行多次？

调用空方法后标记是清楚的，但它仍然在内存中，我已经检查了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");
});

Answer 1

我的猜测是你绑定了后退按钮的多个点击事件，尝试使用$(document).one("click", ".back", function() {});

代替

$(document).on("click", ".back", function() {});

例：

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

Answer 2

这与脚本如何解析并放入页面DOM有关。 解析并执行后删除脚本标记不会将其删除。

请参阅此标记和代码，例如：

标记：

<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);
});

现在执行此操作时，您可以单击“howdy”按钮。 你在控制台中得到第一行，注意第二行来自外部处理程序。

howdyclick from org
howdyclick from outside

现在单击“测试”按钮，将新脚本和标记放在您的位置。 现在再次单击“你好”按钮 - 看到你仍然从原来的代码里面得到响应，现在有了新的标记和脚本 - 然后添加了第三行。 所以你看到原版仍然存在并执行。

howdyclick from org
howdyclick from outside
howdyclick from test

我把小提琴放在一起所以你可以在这里找到你自己https://jsfiddle.net/8fwfoc5b/