Question

我展示了这样的项目列表：

为什么我的代码仅适用于第一个按钮？当我点击其他时，没有任何事情发生。

$(document).ready(function() {
    $("#js-toggle-attendance").click(function (e) {
        var button = $(e.target);
        $.post("/api/attendances", { gigId: button.attr("data-gig-id") }).done(function() {
            button.removeClass("btn-default").addClass("btn-info").text("Ide");
        }).fail(function() {
            alert("Coś poszło nie tak :(");
        });
    });
});

Answer 1

您已在元素的click上应用了id个事件。根据{{3}}，您只能使用元素id一次。因此，使用您的课程$("#js-toggle-attendance")

更改$(".elementclass")

Answer 2

我认为您在该按钮中使用了相同的ID ....所以您可以将其更改为类吗？

jQuery中的ID选择器规则

每个id值只能在文档中使用一次。如果超过一个元素已分配相同的ID，使用该ID的查询只会选择DOM中第一个匹配的元素。这种行为但是，不应该依赖;包含多个文档的文档使用相同ID的元素无效。

检查DOC

jQuery ID选择器中的PATCH

使用属性选择器，您可以在所有元素上选择多个元素和绑定事件。在这里，我使用[]而不是#id传递了属性选择器。 这只是同一个id的select maultiple元素的补丁

 $("[id='js-toggle-attendance']").click(function (e) {
        var button = $(this);
        $.post("/api/attendances", { gigId: button.attr("data-gig-id") }).done(function() {
            button.removeClass("btn-default").addClass("btn-info").text("Ide");
        }).fail(function() {
            alert("Coś poszło nie tak :(");
        });
    });

Answer 3

您的按钮上是否有一个ID？

尝试这样的事情

function toggle (id){

    $.post("/api/attendances", { gigId: id }) //id=button.attr("data-gig-id") ????
                        .done(function() {
                             $("#js-toggle-attendance-"+id).removeClass("btn-default").addClass("btn-info").text("Ide");
                        })
                        .fail(function() {
                            alert("Coś poszło nie tak :(");
                        });
                });
}

为什么它仅适用于第一个按钮？

3 个答案:

jQuery中的ID选择器规则