链接导致刷新答案

【问题标题】：Link causes refresh链接导致刷新
【发布时间】：2012-10-13 15:47:14
【问题描述】：

我尝试让一个链接触发一个 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);
            }
        });
    }
});

}

成功功能用于获取购物车的更新版本。这实际上工作得很好。但是，在整个周期的中途，我得到了一个奇怪的页面刷新。

我点击链接。

页面刷新，项目没有被删除。

我再次点击链接。

页面未刷新。

项目被删除。

为什么我必须点击两次，我该怎么做才能解决这个问题？

【问题讨论】：

为什么不直接用id来保存产品的id呢？
尝试将console.log('ready') 添加为就绪回调的第一行。也许您在调用ready 回调之前点击了？ $(document).ready(function(){console.log('ready');});
问题不应该出在您引用的代码中，您正在做正确的事情来防止默认操作。它可能在deleteId 中。但我强烈建议您不要在href 中输入无效值。请改用data-* attribute。滥用href 是个坏主意。
为什么要使用和 onclick！！！！只需使用
或
来防止冲突。

好吧，<a> 默认的样式类似于链接（指针光标、下划线等），所以在这里使用它不是一个坏主意。问题只是使用href 来执行 OP 正在尝试做的事情。

【解决方案1】：

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

return false 会阻止页面在单击事件后刷新，但如果代码在此之前遇到错误...

因此，您可以尝试删除 href 标记并将其改为 rel（或其他）标记。阅读它并将其用于您的 AJAX 调用。给href 一个类似# 或#removeItem 的值。这会给你带来你渴望的错误。

希望这会有所帮助！

【讨论】：

您也可以使用 javascript 调试器查看代码是否到达 return 语句。

【解决方案2】：

通常当页面很大并且当你点击链接时document.ready 事件还没有触发时你会得到这样的行为。第二次加载速度可能更快（脚本/css 已经下载并来自缓存）。

【讨论】：

【解决方案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; 
  }); 
});

编辑：方法二：

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

jQuery：

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

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

【讨论】：

我不认为项目 ID 应该是可见的
如果有 > 1 个产品怎么办？
正如我提到的，id 可以隐藏，并且每个链接可以有一个跨度
您建议在#productIdSpan 中保留 id，但页面上可能只有 1 个带有此类 ID 的跨度。 a 和 span 之间没有明确的引用
空链接（没有href）也是个坏主意。在某些浏览器中，链接可能看起来无法点击。

【解决方案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 被重新加载并且元素被正确绑定。

【讨论】：