Question

我一直在研究电子商务网络应用程序。我正在尝试实现一个wishlist模块。我正在使用ajax调用将产品添加到wishlist中，并使用ajax将其删除。添加部分工作正常但我在删除部分时遇到问题。我正在尝试做的是，进行ajax调用以从数据库中获取wishlist项目并使用jquery动态添加删除按钮。虽然我知道我必须使用.live函数将事件附加到我所做的事情，但是当我点击按钮时，所有愿望清单中存在的项目都将被删除。我看到多个ajax请求是在网络选项卡下的控制台中进行的，我不明白为什么，虽然我只点击了一次。以下是我的代码片段

$.ajax({
  type: "POST",
  url: "fetchdata1",
  data: "cat=" + cat,
  success: function(data) {
    productContainer.innerHTML = "";
    var $productContainer = $('#productContainer');

    $.each(data, function(key, value) {
      if (value['newVar'] === 1) {
        $productContainer.append("<div id='productBox' class='grid_3'>\n\
          <a href='product.jsp?id=" + value['id'] + "'><img src='" + value["image"] + "'/></a><br/>\n\
          <a href='product.jsp?id=" + value['id'] + "'><span class='black'>" + value['name'] + "</span></a><br/>\n\
          <span class='black'>By " + value['company'] + "</span><br/><span class='red'>RS." + value['price'] + "</span>\n\
          <br/><br/><a id='remove' href='#'>REMOVE</a></div>");
        foo(value['id']);
      } else {
        $productContainer.append("<div id='productBox' class='grid_3'>\n\
          <a href='product.jsp?id=" + value['id'] + "'><img src='" + value["image"] + "'/></a><br/>\n\
          <a href='product.jsp?id=" + value['id'] + "'><span class='black'>" + value['name'] + "</span></a><br/>\n\
          <span class='black'>By " + value['company'] + "</span><br/><span class='red'>RS." + value['price'] + "</span></div>");
      }
    });
  }
});

function foo(value) {
  var pid = value;
  $('#remove').live("click", function() {
    $.ajax({
      type: "POST",
      url: "removeFromWishlist",
      data: "pid=" + pid,
      success: function(response) {
      }
    });
  });

在第一个ajax请求中，我从数据库中获取产品，然后动态添加删除按钮，然后调用函数foo，使用.live函数附加click事件，然后调用数据库去掉它。嘿伙计们，我不是网络上的专业人士，所以如果我犯了一些愚蠢的错误，请对我说话谢谢！

Answer 1

问题出现了，因为您在每个循环中多次注册侦听器。因此，要解决此问题，您需要在填充所有按钮后注册一次。我还将选择器更改为类“.remove”，因为您将有多个删除按钮，因此使用id将被复制，并使用jquery .on（）而不是.live（）（不建议使用）

$.ajax({

  type: "POST",
  url: "fetchdata1",
  data: "cat=" + cat,

  success: function(data) {
    productContainer.innerHTML = "";
    var $productContainer = $('#productContainer');
    $.each(data, function(key, value) {
      if (value['newVar'] === 1) {
        $productContainer.append("<div id='productBox' class='grid_3'>\n\
                 <a href='product.jsp?id=" + value['id'] + "'><img src='" + value["image"] + "'/></a><br/>\n\
                 <a href='product.jsp?id=" + value['id'] + "'><span class='black'>" + value['name'] + "</span></a><br/>\n\
                 <span class='black'>By " + value['company'] + "</span><br/><span class='red'>RS." + value['price'] + "</span>\n\
                 <br/><br/><a class='remove' id='remove' data-pid='" + value['id'] + "' href='#'>REMOVE</a></div>");
      } else {

        $productContainer.append("<div id='productBox' class='grid_3'>\n\
                 <a href='product.jsp?id=" + value['id'] + "'><img src='" + value["image"] + "'/></a><br/>\n\
                 <a href='product.jsp?id=" + value['id'] + "'><span class='black'>" + value['name'] + "</span></a><br/>\n\
                 <span class='black'>By " + value['company'] + "</span><br/><span class='red'>RS." + value['price'] + "</span></div>");
      }
    });
    foo();
  }

});


function foo() {
  $('.remove').on("click", function() {
    var pid = $(this).data("pid");
    $.ajax({

      type: "POST",
      url: "removeFromWishlist",
      data: "pid=" + pid,

      success: function(response) {


      }


    });



  });

Answer 2

问题：您有多个超链接的相同ID，并且您在“基于ID”选择器上使用.live函数。它再次应用了点击功能＆amp;再次对第一个元素。

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

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

然后在foo（）函数

function foo(obj) {
  var pid = $(obj).attr("pid");
  $(obj).bind("click", function() {
    $.ajax({
      type: "POST",
      url: "removeFromWishlist",
      data: "pid=" + pid,
      success: function(response) {
      }
    });
  });

虽然我只需要一次多次调用Ajax请求？

2 个答案: