Ajax .load()在初始触发时无法工作

Ajax .load() won't work when triggered initially

本文关键字：工作 load Ajax      更新时间：2023-09-26

所以我有一个简单的选项卡系统，我用。load函数来加载所需的内容。问题是包含这个选项卡系统的页面本身是ajax加载的内容。由于某些原因，初始调用tab函数来显示初始选项卡内容将无法工作。但在手动选择一个选项卡后，load函数会正确加载内容。

有一些代码要看:

选项卡处理程序:

function loadTab(tab) {
  $(".tab_a:eq("+otab+")").removeClass("tab_slc");
  $('#tab_content').hide();
  $('#tab_content').load("include/tab_downloadVersions.html .tab:eq("+tab+")");
  $(".tab_a:eq("+tab+")").addClass("tab_slc");
  $('#tab_content').fadeIn(function() {});
  otab = tab;
}
在

的末尾，我调用loadTab(tab);，这个东西应该被初始化。但由于某些原因，内容仍然是空的。只要你手动点击一个选项卡(我有一个点击函数调用loadTab(tab)一切开始工作)

因为代码本身工作，我认为问题是由处理页面本身的其他脚本引起的。它也是一个加载页面的。load函数，加载这个选项卡系统。

那么多个。load不喜欢彼此吗?如果是这样，我能改变什么?提前感谢;)

编辑:由于某些原因，我不能发布完整的代码，但是如果你去这里，你可以看到所有脚本的网站运行:n.ethz.ch/学生/lukal/paint.net

标签系统在下载页面。

编辑 :-----------------------------------------------------------------------------------------------------------------------------大更新

所以这仍然是相同的问题，但略有不同:我做了评论中建议的事情，并将我的第二个.load()调用放在第一个成功调用的内部。

$("#content").load("pages/contact #contentInside", function() {
        $("#OtherContent").load("include/info #OtherContentInside");
});

这行得通。

但是现在我有了一个伟大的想法，那就是创建一个巨大的load函数。这是一个比普通加载稍微好一点的函数，因为它会有一些褪色之类的。但现在我有同样的问题，但更复杂。我创建了加载函数作为一个"插件"，所以函数本身是在一个不同的脚本文件，因此我不能访问成功函数的内部。我用return $.ajax();和。done()调用解决了这个问题。这里的问题是，有一些罕见的情况下，它只是跳过二次加载函数。因此，我正在寻找一种有保证的方法来控制.load调用的顺序。任何想法?

模型网站是最新的新脚本，如果你想看看。人们在抱怨我的链接可能会传播病毒。由于某些原因，我不能发布很长的代码片段，所以这个网站是我展示一切的最佳来源。如果你知道一个更可靠的方式来分享我的代码，请告诉我。

我们无法看到代码的其余部分来判断初始调用是从哪里调用的。像下面这样的设置应该可以工作:

$(function() {
    var tab = 0;
    loadTab( tab );
});
function loadTab(tab) {
  //WHAT IS otab???
  $(".tab_a:eq("+otab+")").removeClass("tab_slc"); //<<<==== otab
  $('#tab_content').hide();
  $('#tab_content').load("include/tab_downloadVersions.html .tab:eq("+tab+")");
  $(".tab_a:eq("+tab+")").addClass("tab_slc");
  $('#tab_content').fadeIn(function() {});
  otab = tab;
}

它最初不工作的原因是因为otab在函数第一次调用时没有定义。您在函数末尾初始化了otab，但在函数开头使用它

更新2

我有机会看看你的代码，我刚刚发现了问题所在:

  1. 你没有准备好DOM
  2. 您没有在页面加载时调用函数。

下面的代码版本应该可以工作——尽量不要像使用otab那样使用全局变量。由于您是在页面的末尾加载这个脚本(并且您正在使用事件委托)，因此您可能已经准备好了DOM。如下所示添加.trigger('click')或click()应该可以解决这个问题。

//Tab-loader
//Haeri Studios
var tab = 0;
var otab = tab;
var counter = 0;

//click detect
$(document).on('click', '.tab_a', function() {
    tab = counter == 0 ? tab : ($(this).attr('id'));
    loadTab(tab);
    counter++;
    return false; 
})
.trigger('click'); //<<<<<===== This will call the function when the page loads
//Tab setup
function loadTab(tab) {
    //Content Setup
    $(".tab_a:eq("+otab+")").removeClass("tab_slc");
    $('#tab_content').hide();
    $('#tab_content').load("include/tab_downloadVersions.html .tab:eq("+tab+")");
    $(".tab_a:eq("+tab+")").addClass("tab_slc");
    $('#tab_content').fadeIn(function() {});
    otab = tab;
}
//Initialize << WHAT ARE YOUR INTENTIONS HERE .. DO YOU REALLY NEED THIS PIECE?
$.ajax({success: function() {
    loadTab(tab);
}});

这个问题的部分答案是在页面加载函数的成功调用中调用loadTab函数，就像charlietfl指出的那样。但问题是，没有必要在每次调用新页面时都调用表加载器。所以我不希望在每个页面设置函数中都有一个罕见的调用。

我对stackoverflow的系统有点失望。似乎如果你没有很高的声誉水平，没有人会给你的问题一个"S"。好吧，但至少有人提出了一些意见，对此我非常感激。因此，通过深入研究谷歌，我发现回调可以手动放置在函数的任何地方。

如果我们有一个函数:

foo(lol, function() {
     //This after
});

this在foo()完成后执行操作。但是，如果我们在foo()中有另一个函数，我们也需要等待:

function foo(lol) {
    bar(troll, function() {
       //This first
    });
}

bar函数与foo的成功调用无关。这会导致不可预测的调用结果。

技巧在于控制何时调用foo的成功函数。如果我们在foo中添加一个参数(callback)，并在bar的成功调用中调用这个"参数"(callback();)，我们可以确保顺序得到保证。

就是这样:

function foo(lol, callback) {
   bar(troll, function() {
      //This first
      callback();   //<-This callback placement defines when it should be triggered
   });    
}
foo(lol, function() {
   //This after
});

我们得到:

//this first
//this after

相关文章：