链接导致刷新

Question

我尝试让链接触发 JavaScript 函数，该函数触发 ajax 调用来删除项目。

像这样：

<a class="delete" href="@item.Product.Id">(x)</a>

点击叉号带有要删除的产品id。 href 属性存在的唯一原因是携带值。

$(document).ready(function () {  
$('.delete').click(function (e) {
    e.preventDefault();
    var id = $(this).attr("href");
    deleteItem(id);
    return false;
});
});

Ajax 调用：根据要求：

function deleteItem(id) {
    $.ajax({
        url: "/Shoppingcart/RemoveItem",
        type: "POST",
        data: "id=" + id,
        cache: false,
        error: function (xhr, status, error) {
            console.log(xhr, status, error);
        },
        success: function () {
            $.ajax({
                url: "/Shoppingcart/Index",
                type: "GET",
                cache: false,
                error: function (xhr, status, error) {
                    console.log(xhr, status, error);
                },
                success: function (result) {
                    success(result);
                }
            });
        }
    });
}

成功功能用于获取购物车的更新版本。 这实际上效果很好。然而，我在周期中途遇到了奇怪的页面刷新。

我点击链接。

页面刷新，该项目并未被删除。

我再次点击链接。

页面未刷新。

该项目已被删除。

为什么我必须点击两次？我该如何解决这个问题？

Answer 1

最正确的答案是：你不知道错误是什么， 因为在您看到错误之前页面正在刷新。

返回 false 可防止页面在单击事件后刷新，但如果代码在此之前遇到错误...

因此您可以尝试删除

href

标签并将其改为 rel （或其他）标签。阅读该内容并将其用于 AJAX 调用。为

href

指定一个值，例如

#

或

#removeItem

。 这会给你带来你渴望的错误。

希望这有帮助！

Answer 2

通常，当页面很大并且单击链接时

document.ready

事件尚未触发时，您会遇到这种行为。第二次加载速度可能会更快（脚本/CSS 已经下载并来自缓存）。

Answer 3

据我所知，有一个隐藏字段或隐藏范围来保存“ProductId”并完全删除 href 属性，如下所示。

<span id="productIdSpan">@item.Product.Id</span>
<a class="delete"></a>

jQuery：

$(document).ready(function () {   
     $('.delete').click(function (e) {     
     var id = $("#productIdSpan").html();     
     deleteItem(id);     
     return false; 
  }); 
}); 

编辑： 方法2：

您可以将 ProductId 存储在锚标记的“title”属性中，如下所示

jQuery：

$(document).ready(function () {   
     $(".delete").on("click", function (e) {     
     deleteItem($(this).attr("title"));     
     return false; 
  }); 
}); 

这应该可以解决您的问题。希望这有帮助！！

Answer 4

正确答案是： 当您将 element 添加到 html after 时，页面将被加载（例如使用 AJAX ），并且您希望以任何方式触发事件。您必须将点击事件重新绑定到新元素。

当页面加载并且您的 javascript 和 jQuery 加载时。该元素还不是他们的，因此他们无法找到它或与其交互。

所以在我的情况下：

function addItem(id, amount) {
    $.ajax({
        url: "/Shoppingcart/AddItem",
        type: "POST",
        data: "id=" + id + "&amount=" + amount,
        cache: false,
        error: function (xhr, status, error) {
            console.log(xhr, status, error);
        },
        success: function () {
            // Calls for the new update version of the shopping cart.
            $.ajax({
                url: "/Shoppingcart/Index",
                type: "GET",
                cache: false,
                error: function (xhr, status, error) {
                    console.log(xhr, status, error);
                },
                success: function (result) {
//Call the function that changes the html
                        success(result);
                    }
                });
            }
        });
    }

function success(result) {
    $("#shoppingcart").html(result);
//The tricky part: rebinding the new event.
    $('.delete').click(function (e) {
        e.preventDefault();
        var id = $(this).attr("data-id");
        deleteItem(id);
        return false;
    });
}

删除按钮在刷新后确实起作用，因为这样 JavaScript 被重新加载并且元素被正确绑定。