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