jQuery不适用于创建后的元素

Question

我想用从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");
});
})();

Answer 1

好的，您的问题是您没有检测到好的元素。 我已经修改了您的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");
        });
    });

请尝试： http : //plnkr.co/edit/qZmi3jJS4WVcN676OSP2

更新以关闭

尝试

$(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");
    });

链接： http ： //plnkr.co/edit/WKtJUqOwkEGnhb2Zc1HZ