Question

我有一个jQuery函数，我遇到了一个小问题：

$(function() {
  $("a.CompletedCheckBox").click(function() {
    if($(this).hasClass("CheckedCompletedCheckBox")) {
      $(this).removeClass("CheckedCompletedCheckBox");
    } else {
      $(this).addClass("CheckedCompletedCheckBox");
    }
      $.get("/Tasks/Complete/" + this.id, "", function() {});
  });
});

第一次单击链接时，事件功能按预期工作。但是，每次我点击链接时，该类都会正确切换，但$ .get请求不会触发。

知道为什么对服务器的请求只是第一次触发？

编辑：以下是我正在使用的标记：

<table>
  <tr>
    <th>
      Header Text
    </th>
    ... and so on ...
  </tr>
  <% foreach (var item in Model as Item[])
  {%>
  <tr>
    <td>
      <a href="#" 
         class='<%= "CompletedCheckBox " + (item.Complete ? "CheckedCompletedCheckBox" : "") %>' 
         id='<%= item.ID %>'></a>
    </td>
    ... and so on ...
  </tr>
  <% } %>
</table>

编辑2：这在FireFox中运行良好，但不适用于IE7。我想在我的应用程序中支持IE，所以我需要想出为什么这不适用于IE。

我正在从Google（http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js）加载jQuery，如果它有任何区别的话。

Answer 1

IE可能会缓存$ .get（）请求的结果。尝试在get请求的URL中添加时间戳，如下所示：

var myDate = new Date();
var timestamp = myDate.getTime();
$.get("/Tasks/Complete/" + this.id + '?t=' + timestamp);

Answer 2

只有一件事，你可以简化一个方面：

$(function() {
  $("a.CompletedCheckBox").click(function() {
    $(this).toggleClass("CheckedCompletedCheckBox");
    $.get("/Tasks/Complete/" + this.id, "", function() {});
  });
});

您的.get（）调用看起来不错。请记住，浏览器往往会限制同时发生的Ajax请求数（通常为2或更少）。你确定你的电话回来了吗？您是否考虑过使用.ajax（）调用并指定超时和/或错误处理程序以便查看正在进行的操作？

编辑：尝试了以下代码，它运行正常。你还有别的东西在继续。

<html>
<head>
  <title>Test Get</title>
  <style type="text/css">
    .CompletedCheckBox { background-color: yellow; display: block; }
    .CheckedCompletedCheckBox { border: 2px solid black; }
  </style>
</head>
<body>
</body>
<a id="abcd" class="CompletedCheckBox">Click me</a>
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.1");
  google.setOnLoadCallback(function() {
      $(function() {
          $("a.CompletedCheckBox").click(function() {
                $(this).toggleClass("CheckedCompletedCheckBox");
                $.get("/test2.php?id=" + this.id, "", function() {});
              });
      });
    });
</script>
</html>

和

<?php
error_log("User pressed link for id $id");
?>

嗯，id没有通过，但错误日志是每次点击。

Answer 3

我在本地执行代码没有问题。即使在服务器上设置Thread.Sleep之后，每个GET也会返回。

你的“/ Tasks / Complete /”网址是否会返回任何内容？ HTML，纯文本，json？

您使用的浏览器是什么？所有浏览器都会出现此问题吗？我会尝试使用FireBug add-on的FireFox在其控制台中查看返回的内容。

让我们知道您的发现！

Answer 4

这是您执行的确切代码吗？那么a.CompletedCheckBox也会有一类CheckedCompletedCheckBox吗？

这似乎应该可行......但如果您在实际代码中使用其他选择器，我可以看到这可能会出错。

您有任何样品标记吗？

Answer 5

是的，请发一个演示吗？

我尝试使用代码的摘录，但它运行正常。

我想可能是你从DOM中删除了（）a.CompletedCheckBox？

我在1.2.6中遇到了问题，你删除（并添加）了一些元素，事件再也不会激发了。

这里有记录：

http://docs.jquery.com/Manipulation/remove#expr

由于您使用的是1.3.1，因此可以尝试使用live（）。

这是一个演示：

http://waynekhan.com/sandbox/index.php/demo/get

红色框中的链接将始终有效，因为我们不会调用remove（）。蓝色框中的链接只能运行一次，因为我们调用remove（）。这可能是你的问题。绿色框中的链接有效，因为我们调用remove（），但我们使用的是live（），而不是click（）。

Answer 6

我知道他现在是一个老问题......但是IE7对缓存HTTPXML对象过于热心......所以你必须要么：

在网址末尾添加一些随机数据（如rmurphy所说）
使用$ .post（）方法，因为IE不会缓存POST
在服务器响应中设置缓存超时，以便IE不缓存：

    Cache-Control = "no-cache"
    Pragma = "no-cache"
    Expires = "0"

Answer 7

这对我有用：Response.Expires = -1;

jQuery ajax请求不会在后续事件中触发

7 个答案: