即使在使用空()清除DOM之后也执行两次jquery函数

Question

Jquery函数正在执行两次(如果向前再返回，则执行次数)。onLoad of LoginMenu.jsp，WorkOrder.jsp加载在中，不管 id是什么。

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

当Schedule.jsp加载时，它将获取计划页面中的记录和打印，该页面由两个引导下拉按钮和一个链接组成，它将将您带到另一个页面。单击schedule.jsp中的一个链接，它将清空，不管是什么 div，然后加载SubcaseMain.jsp。

Subcasemain.jsp包含后退按钮，点击它清空任何div并加载WorkOrder.jsp.so，当我单击schedule.jsp中的链接时，它会点击(.delete)函数在WorkOrder.jsp中出现两次并加载该函数的模式X次数。我检查了div，它是emptied.So，为什么这个函数要执行多次？

在调用空方法之后，标记是清楚的，但是它仍然在内存中，我已经检查了firebug脚本选项卡，它在其中生成多个javascript.Why 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

现在，单击"test“按钮，它像您所做的那样放置新的脚本和标记。现在，再次单击"howdy“按钮--看到您仍然从包含新标记和脚本的”任何“内部的原始代码中获得响应，然后添加第三行。因此，您可以看到原始文件仍然存在并执行。

howdyclick from org
howdyclick from outside
howdyclick from test

我把小提琴放在一起，这样你就可以在这里看到https://jsfiddle.net/8fwfoc5b/