我尝试使链接触发一个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);
}
});
}
});
}
成功功能是获取购物车的更新版本。 而这实际上工作得很好。但是,我在整个周期的中途刷新了一个奇怪的页面。
点击链接。
页面刷新,项目不会被删除。
我再次点击该链接。
页面未刷新。
该项目已删除。
为什么我必须点击两次,我该怎么做才能解决这个问题?
答案 0 :(得分:2)
通常,当页面非常大并且单击链接时document.ready
事件尚未触发时,您会遇到此类行为。第二次加载速度更快(脚本/ css已经下载并来自缓存)。
答案 1 :(得分:2)
最正确的答案是:你不知道错误是什么, 因为在看到错误之前页面是刷新的。
返回false会阻止页面在单击事件后刷新,但如果代码在该点之前遇到错误...
因此,您可以尝试删除href
标记,并将其设为rel(或其他)标记。读取并将其用于AJAX调用。为href
提供#
或#removeItem
之类的值。
这会给你你想要的错误。
希望这有帮助!
答案 2 :(得分:0)
据我所知,有一个隐藏字段或隐藏的跨度来保存“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存储在锚标记的“标题”属性中,如下所示
<强> jQuery的:强>
$(document).ready(function () {
$(".delete").on("click", function (e) {
deleteItem($(this).attr("title"));
return false;
});
});
这应该可以解决您的问题。希望这会有所帮助!!
答案 3 :(得分:0)
正确答案是: 当您在之后将元素添加到页面时(例如使用AJAX)并且您希望以任何方式触发事件。您必须将click事件重新绑定到新元素。
加载页面并加载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被重新加载并且元素被正确绑定。