javascript - jquery ajax调用在重新使用时获取旧数据

Question

我有一个 ajax 调用，它在弹出窗口中构建一个小图。链接的 html 在页面上不同设备的许多不同链接中重复使用。发生的情况是，当您单击第一个设备的图表时，您将获得该设备。你点击第二个设备的按钮，你得到那个设备，但是，如果你一直点击离开，在第三次点击之后，你突然开始只得到第一个设备，一遍又一遍。我认为我的变量以某种奇怪的方式被缓存，我不明白:

HTML:

<a class="bluebtn graphbutton ingraph" href="http://wasat/cgi-bin/rrdjson.cgi?res=3600&start=-24h&end=now-1h&uid=28.7B2562040000" data-uid="28.7B2562040000" data-name="Laundry Room Freezer"></a>
<a class="bluebtn graphbutton ingraph" href="http://wasat/cgi-bin/rrdjson.cgi?res=3600&start=-24h&end=now-1h&uid=28.F7A962040000" data-uid="28.F7A962040000" data-name="Garage Temp"></a>

有问题的代码:

 $(document).ready(function() {
  $('.graphbutton').click(function(e) {
    var formURL = $(this).attr("href");
    var uid = $(this).data("uid");
    var name = $(this).data("name");

    e.preventDefault();
    $.ajax({
      url: formURL,
      dataType: "json",
      cache: false,
      context: this,
      success: function(data){
      console.log("calling mkgraph with uid "+uid+" name " +name);
      make_graph(data.data, uid, name);
    },
      error: function(ts) { 
      console.log(ts.responseText); }
      });
  }); /* clickfunc */
}); /*docready */

发生了什么:

Click freezer:
"calling mkgraph with uid 28.7B2562040000 name Laundry Room Freezer"
Click Garage:
"calling mkgraph with uid 28.F7A962040000 name Garage Temp"
Click Garage again:
"calling mkgraph with uid 28.7B2562040000 name Laundry Room Freezer" 

其中一些链接是由 make_graph() 函数生成的。我有点担心这就是问题所在，并且在执行此操作后不知何故需要重新初始化 ajax 吗？

根据要求，我认为 make_graph() 中的相关代码是导致我的问题的原因。基本上，我正在动态编辑 css 弹出窗口中的按钮，我认为这造成了一种奇怪的情况，即 ajax 绑定(bind)绑定(bind)到旧的 href，并且没有更新，即使生成的链接是正确的HTML。这与绑定(bind)仅在第三次尝试时被破坏的效果一致。

$(".ingraph").each(function() {
 this.href = $(this).attr("href").replace(/uid=.*/g, 'uid=' + uid);
 this.setAttribute('data-uid' ,uid);
 if (devname.length > 0) {
   this.setAttribute('data-name', devname);
 }
});

编辑:添加长答案:

我在主页上有多个按钮。每个都指定一个“uid”，该“uid”被馈送到 rrdjson.cgi，它获取 uid 并找到该设备的数据，并将其作为 json 返回。当 make_graph() 收到此 json 数据时，它会使用图形填充 css 弹出窗口，并编辑 5 个按钮，以便它们引用该 UID。这 5 个按钮通过从 rrdjson.cgi 重新请求数据来更改图表的时间刻度。

我担心的是，当我点击冰箱时，它会更改弹出窗口内按钮的 uid 以引用冰箱。然后我关闭它，单击车库，它还会更改 uid 并正确显示车库数据。然后我点击车库弹出窗口中的一个按钮，噗，我又得到了冰箱。我怀疑 ajax“记住”了 $(this).attr("href") 等的旧值并将这些值传递给代码，而不是重新读取 HTML 的内容。 (也许我指的不是 HTML，而是 DOM，我对两者的区别有点夸张，但我怀疑我指的是 DOM)

也许答案是以某种方式取消注册那些按钮的 ajax 绑定(bind)，并在每次 make_graph() 更改它们时重新注册它？我将如何取消注册？ 。离开() ？ .unbind() ？

Answer 1

在咬牙切齿和谷歌之后，我已经回答了我自己的问题。

https://forum.jquery.com/topic/jquery-data-caching-of-data-attributes

事实证明，jquery 缓存“数据”类型，但不缓存 attr 类型。所以当我这样做时:

uid = $(this).data("uid");

对比

uid = $(this).attr("data-uid");

我得到了截然不同的结果。我想这个故事的寓意是 .data 是 super 邪恶的..:)