Question

我有以下jQuery代码：

$.ajax({
  type: "POST",
  url: "/search",
  data: $("form").serialize(),
  success: function(data) {
    $("#tab").addClass("loading"); // THIS LINE DOESN'T WORK
    // . . . LOAD SEARCH RESULTS HERE (USUALLY TAKES SEVERAL SECONDS) . . .
    $("#tab").removeClass("loading");
  }
});

我有以下CSS：

.loading {
  background: transparent url(../resources/images/loading.gif) no-repeat right center;
  text-indent: -1000px;
}

我有以下相关的HTML：

<div id="tab">
  <table id="searchResultsGrid"></table>
</div>

我无法让行$("#tab").addClass("loading")起作用。在FireBug中观看时，类.loading永远不会添加到#tab对象中。我做错了什么？

谢谢！

Answer 1

试试这个。可能发生的是它正在快速添加和删除loading类以使其自行处理

// add the class before the ajax call
$("#tab").addClass("loading");

$.ajax({
  type: "POST",
  url: "/search",
  data: $("form").serialize(),
  success: function(data) {
    // . . . LOAD SEARCH RESULTS HERE . . .
  }
  complete: function(data) {
    // remove the class on complete, not success, in case of an error
    $("#tab").removeClass("loading");
  }
});

Answer 2

没有看到HTML，很难说，但有一点突出的是，一旦ajax调用返回成功，你就会添加类。尝试改为：

$("#tab").addClass("loading");

$.ajax({
  type: "POST",
  url: "/search",
  data: $("form").serialize(),
  success: function(data) {
    // . . . LOAD SEARCH RESULTS HERE . . .
    $("#tab").removeClass("loading");
  }
});

Answer 3

您应该在ajax调用之前设置类，然后在success函数中将其删除。你正在做的是设置它，然后在相同的代码执行中删除它。在代码完成执行之前，该类不会直观地更新，此时您已经删除了该类。

Answer 4

首先你加载了addClass，然后你就删除了类加载，这就是你没看到它工作的原因，你应该在ajax调用之前添加加载类，当调用返回成功时，你可以删除类

jQuery addClass（）在给定ID时无效

4 个答案: