CODEWITHSUNDEEP
javascriptjquerycssanimationcss-animations
panagulis72
panagulis72

Reputation: 2169

JQuery doesn't work with the after created element

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

Upvotes: 1

Views: 78

Answers (1)

P. Frank
P. Frank

Reputation: 5745

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

Upvotes: 2

Related Questions