CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Norhan
Norhan

Reputation: 105

jQuery - after click close one div and keep others issuse

Hi There,

HTML code

<button class="view btn" data-toggle="collapse" data-target=".collapse">View Content</button>
<div class=" collapse">
    <div class="main-content">
        <p>Hello World</p>
        <button class="close btn">Close</button>
    </div>
</div>
<button type="rest" class="repeat btn col-md-12">Repeat</button>

Jquery code :

    $(".main-content .close").click(function () {
          $(this).parents(".collapse").removeClass("in");
     });
    $(".repeat.btn").click(function (e) {

         e.preventDefault(); // to prevent form submit
         var $self = $(this);
         $self.before($self.prev('.collapse.in').clone());

    });

Steps of my idea are :

1 - Collapse div -- using Bootstrap framework

2 - Repeat this div -- after click on the repeat button

3 - User can close one div before and after repeating

Third one is my issue ... It works when i click on close button before repeat the content ..... But after repeating doesn't

Any help please

please ask if anything doesn't clear.

Demo

Upvotes: 0

Views: 621

Answers (1)

Refilon
Refilon

Reputation: 3489

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$(document).on("click", ".close", function () {
    $(this).parents(".collapse").removeClass("in");

});
$(".repeat.btn").click(function (e) {

    e.preventDefault(); // to prevent form submit
    var $self = $(this);
    $self.before($self.prev('.collapse.in').clone());

});

It has something to do with Event delegation. Good luck.

SEE UPDATED FIDDLE

Upvotes: 4

Related Questions