javascript - 提交 AjaxForm 时识别特定按钮

Question

我正在使用 Django 和 AjaxForm 提交一个表单，将项目添加到用户的“购物车”。我的页面上列出了多个商品，每个商品都有自己的“添加到购物车”按钮。单击特定的“添加到购物车”按钮后，我使用 Ajax 将商品添加到用户的“购物车”并将其显示在屏幕顶部的“购物车”中。用户还可以通过单击购物车中的给定商品从购物车中删除商品。

我现在想在单击“添加到购物车”按钮后更改其外观，但我无法仅识别所单击的特定按钮(而不是所有“添加到购物车”按钮) )。如何识别点击了哪个“添加到购物车”按钮。我在我的 html 按钮中添加了一个“id”字段，并一直在尝试使用它，但没有成功......??

我尝试了很多不同的方法，但要么它们不起作用，要么我把它们放在了错误的位置。例如，我尝试过:

$('.add-to-cart').on('click',function(){
    var id = $(this).attr("id");
    console.log("ID: ");
    console.log(id);
});

还有:

var addButtonID;
    $(this).find('input[type=submit]').click(function() {
        addButtonId = this.id;
        console.log("ID: ");
        console.log(addButtonId)
    )};

关于如何找到被单击的特定按钮以便我可以更新按钮的外观的任何想法???

我的html:

{% for item in item_list %}             
    <form class="add-to-cart" action="/item/add/{{ item.id }}/" method="post" enctype="application/x-www-form-urlencoded">
    <ul>
        <li style="display: block"><button class="addItemButton2" type="submit" id="{{ item.id }}">Add to Cart</button></li>
    </ul>
    </form>
{% endfor %}

我的 JavaScript:

function remove_form_errors() {
    $('.errorlist').remove();
}
function show_hide_cart(){
    var cart = $('#cart');
    var message = $('#message');
    if (cart.find('li').length >= 1){
        cart.show();
        continueButton.show();
        message.hide();
    }
    else {
        cart.hide();
        continueButton.hide();
        message.show();
    }
}

function process_form_errors(json, form)
{
    remove_form_errors();

    var prefix = form.data('prefix'),
    errors = json.errors;
    if (errors.__all__ !== undefined) {
        form.append(errors.__all__);
    }
    prefix === undefined ? prefix = '' : prefix += '-';
    for (field in errors)
    {
        $('#id_' + prefix + field).after(errors[field])
        .parents('.control-group:first').addClass('error');
    }
}
function assign_remove_from_cart() {
    var cart = $('#cart');
    $('.remove-from-cart').on('click', function(e) {
        e.preventDefault();
        $.get(this.href, function(json) {
            remove_form_errors();
            cart.find('a[href$="' + json.slug + '/"]').parent('li').remove();
            show_hide_cart();
        });
    });
}
(function($){
    $(function() {
        var cart = $('#cart'),
            message = $('#message');
            continueButton = $('#continueButton');  

        assign_remove_from_cart();
        // ajax-enable the "add to cart" form
        $('.add-to-cart').ajaxForm({
            dataType: 'json',
            url: this.action,
            success: function(json, status, xhr, form) {
                if (json.errors !== undefined) {
                    // display error message(s)
                    process_form_errors(json, form);
                }
                else if(json.id == -1){
                    // duplicate, do nothing
                    console.log("json.id:%s:json.slug:%s", json.id, json.slug)
                }
                else {
                    // Hide any previously displayed errors
                    remove_form_errors();
                    // compile cart item template and append to cart
                    var t = _.template($('#cart-item-template').html());
                    $('#cart').append(t(json));
                    show_hide_cart();
                    assign_remove_from_cart();
                }
            }
        });
    });
})(jQuery);

Answer 1

根据您的评论，您应该能够将 onClick 函数放入 HTML 页面末尾的脚本标记中，并使其按预期运行(尽管您的 javascript 实际上应该全部位于被引用的单独文件中通过脚本标签)。

$( document ).ready(function(){ 
    $('.add-to-cart :submit').on('click',function(){ 
        var id = this.id; 
        console.log("ID: ",id); 
        //do something with your ID here, such as calling a method to restyle your button
        $('#' + id).css("attribute","new value");
        //or
        $('#' + id).addClass("yourClassName");
    }); 
});