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

【问题标题】：jquery function executing twice even after clearing the DOM using empty()即使在使用 empty() 清除 DOM 后，jquery 函数也会执行两次
【发布时间】：2016-08-03 16:17:25
【问题描述】：

Jquery 函数正在执行两次（或者如果我前进然后后退的次数）。 LoginMenu.jsp 的 onLoad ，WorkOrder.jsp 加载到 whatever id 中。

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

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

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

标签在调用空方法后清除，但它仍在内存中，我检查了它正在制作多个javascript源的firebug脚本选项卡。为什么即使调用空方法后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");
});

【问题讨论】：

@evolutionxbox 我已做出更改，请立即查看
您在类上使用委托绑定...因此，如果具有back 类的元素嵌套在具有delete 类的元素中，您会看到事情发生了两次。也许您可以尝试添加停止立即传播？
不要使用alert，使用console.log并检查浏览器控制台（按F12）。
@Mottie 怎么会？
$(document).ready(function () { $(function () { 将准备好的文档包装在准备好的文档中，这没有任何意义

标签： javascript jquery html twitter-bootstrap bootstrap-modal

【解决方案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>

【讨论】：

【解决方案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);
});

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

howdyclick from org
howdyclick from outside

现在单击“测试”按钮，它会像您一样放置新的脚本和标记。现在再次单击“你好”按钮 - 看到你仍然从现在具有新标记和脚本的“whatever”中的原始代码获得响应 - 然后添加第三行。所以你看到原来的仍然存在并执行。

howdyclick from org
howdyclick from outside
howdyclick from test

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

【讨论】：