Javascript JQuery没有'；不能使用创建后的元素

我想用从json检索到的数据创建一些css卡。它可以迭代，但我对动画有问题。当用户按下按钮时，卡会制作动画并显示更多信息。问题是，动画仅与第一张卡一起工作。我怎样才能解决它？多谢各位

您可以找到完整的代码

这是链接到信息按钮的脚本：

(function(){
'use strict';

var $mainButton = $(".main-button"),
    $closeButton = $(".close-button"),
    $buttonWrapper = $(".button-wrapper"),
    $ripple = $(".ripple"),
    $layer = $(".layered-content");

$mainButton.on("click", function(){
    $ripple.addClass("rippling");
        $buttonWrapper.addClass("clicked").clearQueue().delay(1500).queue(function(){
        $layer.addClass("active");
    });
});

$closeButton.on("click", function(){
    $buttonWrapper.removeClass("clicked");
    $ripple.removeClass("rippling");
    $layer.removeClass("active");
});
})();

---

好的，你的问题是你没有检测到好的元素。我已经修改了你的

script.js

 $(document).on("click",".main-button", function(){
            $(this).find(".ripple").addClass("rippling");
            $(this).closest("main").find(".button-wrapper").addClass("clicked").clearQueue().delay(1500).queue(function(){
            $(this).closest("main").find(".layered-content").addClass("active");
        });
    });

请尝试：

关闭更新

试一试

---

链接：

重复？-id在同一个文档中应该是唯一的。这很完美，正是我想要的。非常感谢。对不起，我还有一个问题。。。。同样的问题，但与“关闭”按钮。我已经试过了，但它不起作用：$（document）.on（'click'，'.close button'，function（）{$（this）.find（.button wrapper”）.removeClass（.clicked”）；$（this.nest（.main”）.find（.layered content”）.removeClass（.rippling”）；$（this.nest（.main”）.find（.layered内容”）.removeClass（.active”）；

$(document).on("click",".close-button", function(){
        $(this).closest("main").find(".button-wrapper").removeClass("clicked");
        $(this).closest("main").find(".ripple").removeClass("rippling");
        $(this).closest("main").find(".layered-content").removeClass("active");
    });