代码之家 › 专栏 › 技术社区 › Kyle Trauberman pestades

jquery-ajax请求未在后续事件上触发

asp.net-mvc jquery

Kyle Trauberman pestades · 技术社区 · 15 年前

我有一个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不起作用。

我正在从谷歌加载jquery( http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js ,如果有什么不同。

7 回复 | 直到 15 年前

rmurphey 15 年前

IE可能正在缓存$.get()请求的结果。尝试向GET请求的URL添加时间戳,例如:

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

cletus 15 年前

只有一件事,你可以简化一个方面:

$(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没有通过,但是每次点击都会记录错误日志。

Jarrod Dixon IndianaJones 15 年前

我在本地执行代码没有问题。即使设置了线程,每个GET都会返回。请在服务器上睡眠。

您的“/tasks/complete/”url是否返回任何内容?HTML,纯文本,JSON?

您使用的浏览器是什么?这个问题在所有浏览器中都存在吗? 我会尝试使用firefox FireBug add-on 在控制台中查看返回的内容。

让我们知道你发现了什么!

youdontmeanmuch 15 年前

这是您执行的确切代码吗?那么a.completed复选框也将有一个checkedCompleted复选框类?

这似乎是可行的…但如果您在实际代码中使用其他选择器,我可以看到这可能会出错。

您有任何示例标记吗?

Wayne 15 年前

是的,请发布演示?

我试过用你的代码摘录,但效果很好。

我想可能是您正在从dom中移除一个.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()。

Nicholas Franceschina rob2universe 15 年前

我知道他现在是个老问题了…但是IE7对缓存httpxml对象过于热心…所以你必须:

把一些随机数据放在URL的末尾(如rmurphy所说)
改用$.Post()方法,因为IE不缓存日志
在服务器响应中设置缓存超时,以便IE不缓存:

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

user184511 15 年前

这对我很有效:response.expires=-1;