Javascript Ajax请求被多次调用，尽管我只需要一次？

我一直在开发一个电子商务web应用程序。我正在尝试实现一个愿望列表模块。我使用ajax调用将产品添加到wishlist中，并使用ajax将其删除。添加部分工作正常，但我在删除部分时遇到问题。我试图做的是，调用ajax从数据库中获取愿望列表项，并使用jquery动态添加一个删除按钮。虽然我知道我必须使用

.live

功能将事件附加到它，但当我单击按钮时，愿望列表中的所有项目都将被删除。我在控制台的“网络”选项卡下看到多个ajax请求，我不明白为什么，尽管我只单击了一次。下面是我的代码片段

$.ajax({
类型：“POST”，
url:“fetchdata1”，
数据：“cat=”+cat，
成功：功能（数据）{
productContainer.innerHTML=“”；
var$productContainer=$（“#productContainer”）；
$。每个（数据、函数（键、值）{
if（值['newVar']==1）{
$productContainer.append（“\n\

\n\

\n\
通过“+value['company']+”
RS.“+value['price']+”\n\


；
foo（值['id']）；
}否则{
$productContainer.append（“\n\

\n\

\n\
通过“+value['company']+”
RS.“+value['price']+”）；
}
});
}
});
函数foo（值）{
var pid=值；
$（“#删除”）.live（“单击”，函数（）{
$.ajax({
类型：“POST”，
url:“removeFromWishlist”，
数据：“pid=”+pid，
成功：功能（响应）{
}
});
});

在第一个ajax请求中，我从数据库获取产品，然后动态地向其添加删除按钮，然后调用函数

foo

，该函数使用

.live

函数附加单击事件，然后调用数据库将其删除。 嘿，伙计们，我不擅长网络，所以如果我犯了一些愚蠢的错误，请对我宽容一些。

---

谢谢！

发生此问题的原因是您在每个循环中多次注册侦听器。因此，要解决此问题，您需要在填充完所有按钮后注册一次。我还将选择器更改为class“.remove”，因为您将有多个移除按钮，所以使用id是将被复制的，并使用jquery.on（）而不是.live（）（已弃用）

$.ajax({
类型：“POST”，
url:“fetchdata1”，
数据：“cat=”+cat，
成功：功能（数据）{
productContainer.innerHTML=“”；
var$productContainer=$（“#productContainer”）；
$。每个（数据、函数（键、值）{
if（值['newVar']==1）{
$productContainer.append（“\n\

\n\

\n\
通过“+value['company']+”
RS.“+value['price']+”\n\


；
}否则{
$productContainer.append（“\n\

\n\

\n\
通过“+value['company']+”
RS.“+value['price']+”）；
}
});
foo（）；
}
});
函数foo（）{
$（'.remove'）。在（“单击”，函数（）上）{
var pid=$（this.data（“pid”）；
$.ajax({
类型：“POST”，
url:“removeFromWishlist”，
数据：“pid=”+pid，
成功：功能（响应）{
}
});
})；

问题： 对于多个超链接，您具有相同的id，并且正在使用“基于id”选择器上的.live功能。它正在对第一个元素再次应用单击功能

解决方案： 更新你的超链接

<a href='#' onclick="foo(this)" pid=value['id']>REMOVE</a>

---

我不明白你为什么多次使用同一个id

另外，jQuery.live已经被弃用了。 如果要获得实时行为，可以使用此选项：

$(document).on('click', 'element-selector', function(){
   ...
});

使用您的代码，它可以重写为：

$(document).on('click', '[id=remove]', function(){
   ...ajax call...
});

现在，fetch data函数的问题是：

$.each(data, function(key, value) {
      if (value['newVar'] === 1) {
        ...append element...
        **foo(value['id']);**
      } else {
         ...append element...
      }
});

正如我们所知，foo（）是绑定移除行为的函数。 根据您的代码，每当获取数据的newVar=1时，它都会直接调用foo。这意味着绑定移除行为会多次出现，就像newVar=1一样多

解决方案： 可以将pid作为a元素的属性 可能类似于

在remove click函数中，您可以使用$（this）.attr（'pid'）来获取该值。

---

并将该foo（）内容删除到函数外部，因为

$（元素）.live（…）

或

$（文档）.on（事件，元素，…）

将侦听元素，甚至是动态添加到页面中的元素。

这不起作用我现在无法发出ajax请求我编辑了标记。我编辑的是我使用HTML自定义数据属性存储id并在按钮单击事件中获取它，然后调用foo（）在完成循环后立即注册事件。它仍然不起作用，我不理解`var pid=$（this）.data（“pid”）59449g以上的变化？

$.each(data, function(key, value) {
      if (value['newVar'] === 1) {
        ...append element...
        **foo(value['id']);**
      } else {
         ...append element...
      }
});