Does not catch events after cloning - jquery bootstrap

Question

Does not catch events after cloning - jquery bootstrap

Navigation

#1 by (1 votes)

0

I'm using the code below to clone the accordion. But when trying to expand the accordion that was cloned the captured event fires the parent accordion. I know the clone event is limited but how do I resolve 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>

jquery bootstrap-3

asked by anonymous 30.11.2017 / 15:46

1 answer

Error in running Naïve Bayes using Spark Object comes pro bean with all fields blank JSF

score 1 · Accepted Answer

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

What is happening is that:

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

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

E

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

In your case, you need to modify the value of 'parent' so that it correctly identifies where the 'collapse' will be done.

Just add '.attr("data-parent","#collapse-" + hash);' to $ 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 instead of insertAfter , the appendTo method will put in, while insertAfter will append after, losing the structure.

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

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><linkhref="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><divclass="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>