Question

所以我有一个简单的标签系统，我用.load函数来处理所需的内容。问题是包含此选项卡系统的页面本身是一个加载了ajax的内容。由于某种原因，tab函数的初始调用显示初始选项卡内容将不起作用。但在手动选择选项卡后，加载功能会正确加载内容。

她要看一些代码：

标签处理程序：

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函数，它加载了这个标签系统。

多个.loads彼此不喜欢吗？如果是这样，我可以改变什么？在此先感谢;）

编辑：由于某种原因，我无法发布整个代码，但是如果你去这里，你可以看到所有脚本的网站： n.ethz.ch/student/lukal/paint.net

标签系统位于下载页面上。

编辑：--------------------------------------------- -------------------------------------------------- ------------------------------ 大更新

所以这仍然是同样的问题，但有一点点扭曲：我做了评论中建议的内容，并将第二个.load（）调用放在第一个成功调用中。

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

这样可行。

但是现在我有了一个很棒的想法来制作一个巨大的负载功能。它比一般的负载稍微好一点，因为它会产生一些褪色和东西。但现在我有同样的问题，但更复杂。我将加载函数创建为“插件”，因此函数本身位于不同的脚本文件中，因此我无法访问成功函数的内部。我用return $.ajax();和.done（）调用解决了这个问题。这里的问题是，有一些罕见的情况，它只是跳过辅助加载功能。所以我正在寻找一种保证控制.load调用顺序的方法。有什么想法吗？

如果您想查看，模拟网站是新脚本的最新版本。人们抱怨我的链接可能传播病毒。出于某种原因，我无法发布长代码片段，因此该网站是我展示一切的最佳来源。如果您知道一种更值得信赖的方式来分享我的代码，请告诉我。

Answer 1

我们无法看到您的其余代码告诉您调用初始调用的位置。如下设置应该有效：

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

我有机会查看您的代码，我发现了问题所在：

您没有准备好DOM
您没有在页面加载时调用该函数。

以下版本的代码应该可行 - 尽量不要像使用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);
}});

Answer 2

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

Answer 3

我对stackoverflow上的系统感到有点失望。看起来如果你没有很高的声誉水平，没有人会对你的问题给出“S”。好吧，但至少有一些意见，我非常感谢。因此，通过深入挖掘谷歌，我发现回调可以手动放置在您喜欢的功能中。

所以，如果我们有一个功能：

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

foo（）完成后会发生这种情况。但是如果我们在foo（）中有另一个函数，我们还需要等待它：

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

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

诀窍是控制何时调用foo的成功函数。如果我们在foo中添加一个参数（回调）并在bar的成功调用中调用这个“parameter”（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

最初触发时，Ajax .load（）无法正常工作

3 个答案: