Question

我正在开发shopping cart，我需要在将产品添加到购物车时阻止页面重新加载。

目前我正在使用 GET方法将产品提交到购物车

<a href="cart/add?itemid=101&itemcat=starter></a>

正如您所看到的，我使用的是链接标记而不是表单。我尝试使用此代码来阻止页面重新加载

  $(document).ready(function(){
    $(".prod a").click(function(){

        var id = $(".prod").find('input[id=itemid]').val();
        var cat = $(".prod").find('input[id=itemcat]').val();

        alert('ID :' + id + '\n\rCAT :' + cat);
        return false; // reload stopped
    });
});

你可能已经注意到我已经使用alert（）测试输出就像我只得到第一个产品休息的值被忽略想到使用循环。请验证上述代码或建议其他解决方案。

以下是fiddle *已更新

问题是我能够获得第一个产品的项目ID而不是第二个

Answer 1

使用event.preventdefault()停止锚标记的默认行为。

您需要this keyword

更改

var id = $(".prod").find('input[id=itemid]').val();
var cat = $(".prod").find('input[id=itemcat]').val();

到

您需要最近的tr元素而不是.prod

ID Selector (“#id”)

var id = $(this).closest('tr').find('#itemid').val();
var cat = $(this).closest('tr').find('#itemcat').val();

closest

$(this).closest('tr')获取tr上最接近的DOM元素。

$(document).ready(function () {
    $(".prod a").click(function (e) {
        e.PreventDefault(); //to stop default behavior of anchor tag
        //this refers to the current a element clicked .
        var id = $(this).closest('tr').find('#itemid').val();
        var cat = $(this).closest('tr').find('#itemcat').val();
        alert('ID :' + id + '\n\rCAT :' + cat);
        return false; // reload stopped
    });
});

Fiddle Demo

Answer 2

$(document).ready(function(){
$(".prod a").click(function(e){

    var id = $(".prod").find('input[id=itemid]').val();
    var cat = $(".prod").find('input[id=itemcat]').val();

    alert('ID :' + id + '\n\rCAT :' + cat);
    e.preventDefault();
    return false; // reload stopped
});
});

尝试在您的脚本中添加e.PreventDefault()。

Answer 3

你用这个

    $(".prod a").click(function(event){
event.preventDefault();
        var id = $(".prod").find('input[id=itemid]').val();
        var cat = $(".prod").find('input[id=itemcat]').val();

        alert('ID :' + id + '\n\rCAT :' + cat);
        return false; // reload stopped

    });

在将项目提交到购物车时阻止页面重新加载。

3 个答案: