JQuery没有't使用创建后的元素

JQuery doesn't work with the after created element

本文关键字:创建 元素 没有 JQuery      更新时间:2023-09-26

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

请尝试: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