jQuery 从 $.ajax 加载的内容中删除所有 $.ajax 请求答案

【问题标题】：jQuery remove all $.ajax requests from $.ajax loaded contentjQuery 从 $.ajax 加载的内容中删除所有 $.ajax 请求
【发布时间】：2011-07-06 02:27:14
【问题描述】：

我正在创建一个用户可以单击链接的页面，它将 $.ajax 将内容加载到容器 div 中。问题是源文件都有自己的 $.ajax 请求，因此当用户单击 2 个或更多链接时，它开始增加 $.ajax 请求的数量并且容器 div 被数据溢出。基本上我的目标是让用户单击一个链接并加载请求的页面（并开始从 ajax 加载的源刷新 $.ajax）。当他们点击另一个链接时，它会从之前的 ajax 加载内容中清除旧的 $.ajax 请求。

$(function(){
                $("a.text").click(function(){
                    $("#botscontainer").remove();
                    $("#botsparent").append("<div id=\"botscontainer\"></div>");
                    $.ajax({
                      url: $(this).attr("id") + ".html",
                      cache: false,
                      success: function(data){
                        $("#botscontainer").hide().append(data).fadeIn("slow");
                      }
                    });

                    return false;
                });
            });

您可以看到当用户单击带有类文本的链接时，它会向具有更多 ajax 内容的页面发送一个 ajax 请求（即间隔）。因此，当用户单击另一个链接时，我需要清除旧的“数据”。我什至完全删除了父元素并重新创建它，但它不会从数据中删除 $.ajax 请求。任何帮助表示赞赏。

【问题讨论】：

标签： javascript jquery ajax bind

【解决方案1】：

中止之前的请求...试试这个...

       $(function()
       {
            $("a.text").bind('click', Request);
       });

       function Request()
            {
                /* I put try catch so that if the xhr object doesn't exist it won't throw error */
                try{
                xhr.abort();
                }
                catch(e){}
                xhr = null;
                xhr = $.ajax({
                  url: $(this).attr("id") + ".html",
                  cache: false,
                  success: function(data){
                    $("#botscontainer").hide().html(data).fadeIn("slow");
                  }
                }
                return false;
            }

仅将链接绑定到一个函数...您基本上是将它们分配给它们自己的 AJAX。

【讨论】：

同样的结果。我最初有这个，然后将其更改为附加，认为 .remove() 可能不适用于 .html()。无论哪种方式，它仍然从其他“点击”请求所有 $.ajax 请求。内容替换正常，但间隔内的 $.ajax 请求不会停止
@Ed 为什么必须同时使用间隔运行函数？
它是 url: $.ajax 加载的内容在一个时间间隔内。加载的内容从查询中提取数据并每 4 秒刷新一次容器，以便显示新数据。
同样的问题。 .html() 替换前端内容（即文本）没有问题，但由于某种原因，它不会停止来自先前 .click() 事件的间隔 ajax 请求
@Ed - 所以，你基本上想取消以前的请求？这样它将停止填充您的容器，对吗？试试我修改后的答案。

【解决方案2】：

您可以取消请求

var x;//in the outer scope of ajax call

x.abort();
x = $.ajax(params);

【讨论】：

【解决方案3】：

为此，您需要使用 setInterval()。只需将保存 setInterval 的 var 设为全局变量，然后在要加载 ajax 内容的第一页上，使用 clearInterval(var) 停止之前的 ajax 请求。

$(function(){
                $("a.text").click(function()
                {
                    clearInterval(refreshId2);
                    $.ajax({
                      url: $(this).attr("id") + ".html",
                      cache: false,
                      success: function(data){
                        $("#botscontainer").hide().html(data).fadeIn("slow");
                      }
                    });

                    return false;
                });
            });

【讨论】：