Question

我尝试在从AJAX调用返回时删除添加到我页面的HTML元素。 但是jQuery似乎并没有意识到这种动态添加的元素。任何解决方案？

上下文：

我正在构建一个简单的购物车。
当用户点击“添加”按钮时，我在数据库中添加该项目并且我想在屏幕上显示它而不重新加载页面。
但，因为用户可能会多次为同一项目点击“添加” 在购物会话中，每次他点击，我想删除任何购物车DIV中该项目的行，并且只保留最多最近的那个项目。

现在，它不起作用，所以我的HTML在多次添加后看起来像这样：

<div id="CartList">
  <p id="Item_shirt7363">shirt7363</p>
  <p id="Item_shirt7363">shirt7363</p>
  <p id="Item_shirt7363">shirt7363</p>
</div>

我的jQuery看起来像这样：

function AddToCartClicked()
{
    item_code = $("#ItemCode").val();
    qty = $("#Qty").val(); 

    $.ajax
        (
            {
                type: "POST",
                url: "/_res/php/add-item.php",
                dataType: "text",
                data: "puid=123&code=" + item_code + "&qty=" + qty,
                success: function(data)
                {       
                    // PROBLEM: First, remove any existing line with this ID
                    $("#Item_" + item_code).remove();               

                    // Write new line
                    newLine = "<p id='Item_" + item_code + "'>" + item_code + "</p>";                   

                    // Add the line in the HTML
                    $("#CartList").prepend(newLine);
                }
            }
        );

    return true;
}

我搜索了论坛，没有找到我的问题的匹配项。另外，我是新来的，所以请假设愚蠢。谢谢。

Answer 1

谢谢为你所有的帮助人员，它肯定帮我调试了这个！

最后，问题是某些商品代码中有一段时间（“shirt235.b”）并且jQuery在检索周期未转义时遇到问题（{{3 }}）。

我真的很抱歉我使用了一个简单的虚构示例，认为item_code是什么并不重要...我已经吸取了教训，并且仅发布真实世界代码从现在开始！请接受我的道歉并感谢您的理解。

度过愉快的一周！

Answer 2

我认为val（）仅适用于表单元素，因此在段落元素上调用它时，您无法获得有效的返回值;因此你的选择器什么也没做。

对于调试，尝试输出val（）结果（item_code变量），并查看选择器返回的长度。

Answer 3

这看起来在大多数情况下应该有效，但在下面可能存在以下竞争条件：

想象一下，如果用户单击添加两次，然后浏览器接收并并行运行两个回调函数。

回调不是原子的，它们都可以在它们中的任何一个执行“prepend”函数之前完成“remove”功能。在这种情况下，您将添加两个重复项。

一种解决方案可能是使用某种类型的ajax队列，或者使用变量来模拟“锁定”。

Answer 4

也有点新手，但是多个相同的ID是坏的。尝试使用.attr（'data-id'，item_code）作为选择器，或创建唯一ID。

如何在jQuery中删除AJAX调用后添加的元素？

4 个答案: