Jquery length() not counting on ajax load()

Question

我正在尝试加载一个外部html文件，该文件具有一堆span标签，这些文件将计算我主页和其他页面（如"游戏（9），电影（2）等"）的特定类别列表中的内容数量。

html通过ajax加载内容 -

  <span class="category games">(0)</span>
  <span class-"category movies">(0)</span>

用于插入数字和加载的 Ajax 内容的主要 HTML 代码 -

 <div id="categories">
  <span class="counter cgames">(0)</span>
  <span class="counter cmovies">(0)</span>
 </div>

JavaScript 文件 -

    $( "#categories" ).load( "bunchofspans.html" );
    $(function() {
      var a = $(".movies").length;
            $(".cmovies").text("(" + a + ")");
          a = $(".games").length;
            $(".cgames").text("(" + a + ")");
    });

只需在隐藏的div 上添加另一个具有特定类别的跨度，很容易将数字添加到计数器#categories，所以假设我在第 6 页上有 1 个游戏，然后在第 2 页上我还有另外 6 个，总共 12 个，这意味着我需要在我网站的每个页面的类别游戏中添加 12 个跨度，这很耗时， 因此，如果我通过ajax加载它，这些跨度在每个页面中将有一个位置。

Ajax 内容加载得很好，问题是，无论我如何添加更多跨度，length()似乎都没有计算在内，数字不会在柜台回击也不会增加。

Answer 1

您需要提供回调以加载，如下所示

$( "#categories" ).load( "bunchofspans.html",function() {
      var a = $(".movies").length;
            $(".cmovies").text("(" + a + ")");
          a = $(".games").length;
            $(".cgames").text("(" + a + ")");
});

有关详细信息，请参阅 http://api.jquery.com/load/。

Answer 2

修改javascript以调用function()作为对load()的回调：

$( "#categories" ).load( "bunchofspans.html" , function(){
    var a = $(".movies").length;
    $(".cmovies").text("(" + a + ")");
    a = $(".games").length;
    $(".cgames").text("(" + a + ")");
});

j查询文档

Answer 3

您可以使用如下

Callback Function执行此操作：

$("#categories").load("bunchofspans.html", function () {
    alert("Load was performed.");
    var a = $(".movies").length;
    $(".cmovies").text("(" + a + ")");
    a = $(".games").length;
    $(".cgames").text("(" + a + ")");
});

Answer 4

这里的问题是，无论外部 html 内容是否加载，您计算span数的函数都会执行。那是因为jQuery.load是异步的。
来自 jQuery.load 文档

它大致相当于$.get（url，data，success）

因此，您所需要的只是在外部html内容完全加载后移动要执行的函数

$( "#categories" ).load( "bunchofspans.html",function() {
      var a = $(".movies").length;
            $(".cmovies").text("(" + a + ")");
          a = $(".games").length;
            $(".cgames").text("(" + a + ")");
});