Javascript 链接导致刷新

我试图使一个链接触发一个javascript函数，该函数触发一个ajax调用来删除一个项目

像这样：

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

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);
            }
        });
    }
});

}

成功函数用于获取购物车的更新版本。 这实际上很好用。然而，我得到了一个wierd页面刷新周期的一半

我点击链接

页面将刷新，并且项目不会被删除

我再次点击链接

页面未刷新

该项目已被删除

---

为什么我必须单击两次？我可以做些什么来解决这个问题？

通常，当页面很大且单击链接时document.ready事件尚未触发时，您会出现这种行为。第二次，它可能会加载已下载并来自缓存的更快的脚本/css。

通常，当页面很大且单击链接时尚未触发document.ready事件时，会出现这种行为。第二次，它可能会加载已下载并来自缓存的更快的脚本/css。

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

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

编辑： 方法2：

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

jQuery：

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

---

这应该能解决你的问题。希望这有帮助

据我所知，使用一个隐藏字段或隐藏范围来保存ProductId并删除href属性，如下所示

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

编辑： 方法2：

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

jQuery：

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

---

这应该能解决你的问题。希望这有帮助

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

Return false可防止页面在单击事件后刷新，但如果代码在该点之前出现错误

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

---

希望这有帮助

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

Return false可防止页面在单击事件后刷新，但如果代码在该点之前出现错误

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

希望这有帮助

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

当加载页面并加载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被重新加载，元素被正确绑定。

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

当加载页面并加载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被重新加载，元素被正确绑定。

为什么不使用id来保存产品id？尝试添加console.log“ready”作为ready回调的第一行。可能是在调用就绪回调之前单击的$document.readyfunction{console.log'ready'；}；问题不应该出现在您引用的代码中，您正在做正确的事情来阻止默认操作。它可能在deleteId中。但我强烈建议您不要在href中输入无效值。改用a。滥用href只是一个坏主意。为什么要使用并点击！！！！只是使用或来防止冲突。默认情况下，它的样式类似于链接指针光标、下划线等，所以在这里使用它不是一个坏主意。问题在于只使用href来表示OP正在尝试执行的操作。为什么不使用id来保存产品的id呢？尝试添加console.log'ready'作为ready回调的第一行。可能是在调用就绪回调之前单击的$document.readyfunction{console.log'ready'；}；问题不应该出现在您引用的代码中，您正在做正确的事情来阻止默认操作。它可能在deleteId中。但我强烈建议您不要在href中输入无效值。改用a。滥用href只是一个坏主意。为什么要使用和继续

---

点击只是使用或来防止冲突。默认情况下，它的样式类似于链接指针光标、下划线等，所以在这里使用它不是一个坏主意。问题是只使用href来完成OP想要做的事情。我不认为项目id应该是可见的，如果有>1个产品，该怎么办？正如我提到的，id可以隐藏，并且每个链接可以有一个跨度，你建议将id保留在productIdSpan中。防御地说，页面上只有一个跨度有这样的id。a和span之间没有明确的引用。没有href的空链接也是个坏主意。在某些浏览器中，链接可能看起来不可读。我不认为项目id应该是可见的。如果有>1个产品，该怎么办？正如我提到的，id可以隐藏，并且每个链接可以有一个跨度，您建议将id保留在productIdSpan中。防御地说，如果页面上有这样的id，则只能有1个跨度。a和span之间没有明确的引用。没有href的空链接也是个坏主意。在某些浏览器中，链接可能看起来不可读。您还可以使用javascript调试器查看代码是否到达返回语句。您还可以使用javascript调试器查看代码是否到达返回语句。