JQuery doesn't work with the after created element

Question

I want to create some css card with the data retrieved from json. It iterates fine, but I have a problem with the animation. When the user press a button, the card makes an animation and shows more info. The problem is that the animation works just with the first card. How can I solve it? Thank you.

HERE you can find the full code.

This is the script linked to the info's button:

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

Duplicate? - http://stackoverflow.com/questions/4481485/changing-css-pseudo-element-styles-via-javascript — Paulie_D, Jan 14 '16 at 11:26

P. Frank · Accepted Answer · 2016-01-14T13:19:41.587

2

ok your issue is you not detect good element. i have modify your 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");
        });
    });

please try: http://plnkr.co/edit/qZmi3jJS4WVcN676OSP2

UPDATE for close

Try

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

link : http://plnkr.co/edit/WKtJUqOwkEGnhb2Zc1HZ

edited Jan 14 '16 at 13:19

answered Jan 14 '16 at 11:53

P. Frank

5,691
6
22
50

That is perfect, exactly what I was looking for. Thank you!! – panagulis72 Jan 14 '16 at 11:56
I'm sorry I have another problem.... the same problem but with the "close" button. I've tried this but it doesn't work: $(document).on('click', '.close-button', function () { $(this).find(".button-wrapper").removeClass("clicked"); $(this).closest("main").find(".ripple").removeClass("rippling"); $(this).closest("main").find(".layered-content").removeClass("active"); }); – panagulis72 Jan 14 '16 at 13:12

JQuery doesn't work with the after created element

1 Answers1