Question

我有一个网上商店，用户可以通过一个按钮将产品添加到购物车，因此他们会留在目录页面（列出所有产品）。我通过使用jQuery和ajax来做到这一点。奇怪的是，当我按下按钮时，将提交所有表格。这不是我想要的！

$(function() {
    $('form').submit(function (event) {
        event.preventDefault();

        var $form = $(this),
            formdata = $form.serialize(),
            url = $form.attr('action');

        $.post(url, formdata);
    });
});

我知道我不能使用单个类，因为这会将它们全部提交，但是ID没有用，因为我可以在页面上拥有50多个产品，这将是很多重复的工作。

那么有什么解决方案吗？

提前致谢

Answer 1

您显示的代码应该单独工作，因此您的代码未被命中（由于页面上的错误），或者它没有连接到每个产品的表单（例如如果它们也是动态加载的。）

如果表单是动态加载的，我怀疑它们可能是，那么你需要使用委托的事件处理程序，附加到表单的不变的祖先（document是默认值）

e.g：

$(function() {
    $(document).on('submit', 'form', function (event) {
        event.preventDefault();

        var $form = $(this),
            formdata = $form.serialize(),
            url = $form.attr('action');

        $.post(url, formdata);
    });
});

它通过监听submit事件冒泡到祖先，然后应用jQuery form选择器然后应用函数导致事件的任何匹配元素，因此将对动态添加到页面的表单起作用。

如果不是这种情况，请提供其余代码和页面HTML的示例（来自浏览器另存为，而不是来源）。

Answer 2

构建产品列表时，可以为每个按钮添加属性。这样的事情应该有效：

<button data-productid='ABC123' onclick='addToCart(this)'>Add</button>

<script>
    function addToCart(btn) {
        var productId = $(btn).data('productid');
        // do ajax call, using productid
    }
</script>

Answer 3

我认为你只需要另一个参数，例如当前产品的ID 。所以你可以做类似的事情：

$(function() {
    $('.add-cart-form').submit(function (event) {
        event.preventDefault();

        var $form = $(this),
            productId = $(this).attr('data-product-id'), // Assuming you add the ID in your view
            formdata = $form.serialize() + '&productId=' + productID,
            url = $form.attr('action');

        $.post(url, formdata);
    });
});

然后，你必须检索productId参数，它只返回当前产品。

防止jQuery post请求多次触发

3 个答案: