javascript - JQuery 不适用于创建后的元素

Question

我想用从 json 中检索到的数据创建一些 css 卡片。它迭代得很好，但我对动画有疑问。当用户按下按钮时，卡片会制作动画并显示更多信息。问题是动画只适用于第一张卡片。我该如何解决？谢谢。

HERE你可以找到完整的代码。

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

(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