CODEWITHSUNDEEP
jqueryjquery-animate
Suffii
Suffii

Reputation: 5784

Having Issue on Adding animation to Dynamic element in jQuery

Can you please take a look at this demo and let me know why I am not able to add the .slideDown() function to the process of entering a dynamic div after the parent of selected element?

$(function () {
    $("button").on("click", function () {
        $(".err").hide();
        var elem = $(this);
        elem.parent().after('<div class="alert alert-danger err" role="alert">Thanks For Adding</div>').slideDown("slow");
    });
});
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
body {
    padding:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="well well-sm box">
    <button class="btn btn-default btn-block" type="submit">Add Box</button>
</div>
<div class="well well-sm box">
    <button class="btn btn-default btn-block" type="submit">Add Box</button>
</div>
<div class="well well-sm box">
    <button class="btn btn-default btn-block" type="submit">Add Box</button>
</div>
<div class="well well-sm box">
    <button class="btn btn-default btn-block" type="submit">Add Box</button>
</div>
<div class="well well-sm box">
    <button class="btn btn-default btn-block" type="submit">Add Box</button>
</div>

Upvotes: 1

Views: 667

Answers (1)

Darx
Darx

Reputation: 1526

This should work :)

$(function () {
    $("button").on("click", function () {
        var elem = $(this);
        var $div = $('<div/>',{class: 'alert alert-danger err',role: 'alert'}).hide().text('Thanks For Adding');
        $div.insertAfter(elem.parent());
        $div.slideDown("slow");
    });
});

https://jsfiddle.net/dja0jxm3/1/

Upvotes: 3

Related Questions