javascript - 重复的 javascript 正在加载 ajax

Question

我正在为我的最后一年项目开发一个基于网络的文档管理。用户仅与一个页面交互，当用户单击相应的选项卡(用于导航的已使用选项卡)时，将使用 AJAX 调用相应的页面。

由于有多个用户级别(管理员、经理等)，我已将 javascript 放入相应的网页中。

当用户请求用户请求时，除了某些功能被多次触发的情况外，一切都完美无缺。我发现了问题。每次用户单击一个选项卡时，它都会加载与新实例相同的脚本，当我调用一个函数时，它们都会被触发。

加载我厌倦的内容

.load 和 $.ajax(); 都没有解决这个问题。

当时我尝试将所有内容都放入主页，但我的 jQueryUI 不起作用。我累了

$(document).load('click', $('#tab_root li'), function(){});

同样的问题仍然存在。

谁能帮我解决这个问题？

--编辑--

    $(function){
        $(document).on('click','#tabs',function(e){
            getAjax($(this))
        });

    }

    //method to load via AJAX
    function getAjax(lst){
        var cont = $(lst).text();
        $.ajax({
            url:'../MainPageAjaxSupport',
            data: {
                "cont":cont
            },
            error: function(request, status, error){
                if(status==404){
                    $('#ajax_body').html("The requested page is not found. Please try again shortly");      
                }
            },
            success: function(data){
                $('#ajax_body').html(data);
            },

        });


    }

Answer 1

在执行 JavaScript 后，您无法通过简单地卸载文件或删除脚本元素来撤消它。

最好的解决方案可能是在您包含在 ajax 数据中的每个 JavaScript 文件中设置一个变量，并将它们从在线内联 JavaScript 中包含在 ajax 数据中以及如下条件:

<script>
    if(!tab1Var) $.getScript("filename");
<script>

旧的解决方案

您可以在关闭每个事件之前手动解除绑定(bind)。

$(function){
        $('#tabs').off('click');
        $('#tabs').on('click',function(e){
            getAjax($(this));
        });
}

或者，您可以为主 html 中的每个选项卡初始化一个全局变量 (eventsBound1=false):

$(function){
    if(!eventsBound1){
        $('#tabs').on('click', function(e){
            getAjax($(this));
        });
        eventsBound1 = true;
    }
}

选项卡单击事件只是一个示例，您每次在重新加载的脚本中绑定(bind)事件时都必须执行此操作。

如果所有事件都绑定(bind)到 ajax_body 中的内容，您可以尝试的最后一件事是:

success: function(data){
    $('#ajax_body').empty();
    $('#ajax_body').html(data);
},