重复的 javascripts 正在加载 ajax答案

【问题标题】：Duplicate javascripts are getting loaded ajax重复的 javascripts 正在加载 ajax
【发布时间】：2013-08-18 03:54:48
【问题描述】：

我正在为我最后一年的项目开发基于 Web 的文档管理。用户只与一个页面交互，当用户单击相应的选项卡（用于导航的选项卡）时，将使用 AJAX 调用各个页面。

由于多个用户级别（管理员、经理等），我已将 javascripts 放入相应的网页中。

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

加载我累的内容

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

        });


    }

【问题讨论】：

尝试使用bind而不是点击，这样你就可以unbind事件。或者，如果您要动态创建元素，请使用 on
我试过 .on 但没用。同样的多次出现。
绑定和解除绑定怎么样。此外，在此处或 JSFiddle 上发布您的代码可能会对我们有所帮助！
@harsha 我刚刚完成了绑定，但问题仍然存在。
代码在哪里？？！！

标签： javascript jquery ajax duplicates multiple-instances

【解决方案1】：

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

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

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

旧解决方案

您可以在将每个事件设置为关闭之前手动取消绑定。

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

选项卡单击事件只是一个示例，您每次在正在重新加载的脚本中绑定事件时都必须这样做。

如果所有事件都绑定到 ajax_body 内的东西，那么您可以尝试的最后一件事是：

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

【讨论】：

它没有用。如果我能够删除之前在 getAjax($(this)); 之前加载的旧 javascript 文件功能触发然后我希望问题能够得到纠正。（检查我在问题中的图片）
@Sumer 数据中的 JavaScript 是否传递给您发布的 ajax 调用？然后尝试我发布的第三个解决方案。
很抱歉又失败了。确定它 $('#ajax_body').empty() 工作，但问题是加载的 javascript 仍保留在浏览器缓存中。因此，当我第二次请求 SAME TAB 而不是替换旧的 javascript 时，它会生成一个新的 javascript。
您的 JavaScript 是否在单独的文件中？
@Sumer 那么您必须在每次绑定选项卡中的事件时应用上面的前两个解决方案之一。我假设触发的多个事件与您要替换的部分之外的东西绑定，否则第三个解决方案应该可以工作。如果您使用第二种解决方案，请在主 html 中为每个选项卡定义不同的全局变量。 JavaScript 执行后无法卸载。

【解决方案2】：

您已绑定单击“文档”的事件，因此 getAjax() 仅替换“#ajax_body”而不是“文档”。

这意味着旧事件仍附加到“文档”，您只需使用 $(document).off('click'); 取消绑定事件或将“文档”更改为其他元素。

【讨论】：