Does not capture events after cloning - jquery bootstrap

Question

I am using the code below to clone the accordion. But while trying to expand the accordion that has been cloned the captured event triggers the parent accordion. I know the clone event is limited but how to solve this problem?

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-primary btn-add-panel">
                <span class="glyphicon glyphicon-plus"></span> Novo
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="heading-1">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                                Collapsible Group Item #1
                            </a>
                        </h4>
                    </div>
                    <div id="collapse-1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-1">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var $template = $(".panel-default");

    var hash = 1;
    $(".btn-add-panel").on("click", function () {
        hash++
        var $newPanel = $template.clone(true).insertAfter($template);
        $newPanel.find(".panel-heading").attr("id", "heading-" + hash);
        $newPanel.find("a").attr("href", "#collapse-" + hash).attr("aria-controls", "collapse-" + hash).attr("class", "collapsed").attr("aria-expanded", "false")
        $newPanel.find(".panel-collapse").attr("id", "collapse-" + hash).attr("aria-labelledby", "heading-" + hash).attr("aria-expanded", "false").removeClass("in");
        $("#accordion").append($newPanel.fadeIn());
        $("#collapse-" + hash).css({ 'height:': '0px'})
    });
</script>

Answer 1

By the attributes of his HTML, and knowing that you are using Bootstrap CSS.

What’s going on is that:

For the plugin Collapse Bootstrap CSS uses two main identifiers to tell you what the target will be:

[data-toggle="collapse"] -> Para o trigger

And

[data-parent="' + this.options.parent + '"] -> Para identificar onde será feito trigger

In your case, it is missing to modify the value of 'parent', to correctly identify where the 'collapse'.

Just add '.attr("data-parent","#collapse-" + hash);' at the $newPanel;

$newPanel.find("a").attr("href", "#collapse-" + hash).attr("aria-controls", "collapse-" + hash).attr("class", "collapsed").attr("aria-expanded", "false").attr("data-parent","#collapse-" + hash);

And finally, add an identifier to tell which element will end up being cloned, and use appendTo in place of insertAfter , the appendTo method will put in, while insertAfter will add later, losing the structure.

In the following example I used a classname 'to-copy' which is removed from the object of the new element generated after the appendTo, always copying the same.

Functional example:

var $template = $(".panel-default");

    var hash = 1;
    $(".btn-add-panel").on("click", function () {
        hash++
        var $newPanel = $template.clone().appendTo($template);
        
        
        $newPanel.removeClass('to-copy');
            
        $newPanel.find(".panel-heading").attr("id", "heading-" + hash);
        
        //Aqui foi feito modificações, adicionado o ultimo método
        $newPanel.find("a").attr("href", "#collapse-" + hash).attr("aria-controls", "collapse-" + hash).attr("class", "collapsed").attr("aria-expanded", "false").attr("data-parent","#collapse-" + hash);
        
        $newPanel.find(".panel-collapse").attr("id", "collapse-" + hash).attr("aria-labelledby", "heading-" + hash).attr("aria-expanded", "false").removeClass("in");
        $("#accordion").append($newPanel.fadeIn());
        $("#collapse-" + hash).css({ 'height:': '0px'})
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-primary btn-add-panel">
                <span class="glyphicon glyphicon-plus"></span> Novo
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default to-copy">
                    <div class="panel-heading" role="tab" id="heading-1">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                                Collapsible Group Item #1
                            </a>
                        </h4>
                    </div>
                    <div id="collapse-1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-1">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>