Cloning a bootstrap element with an event listener

Question

I\'m trying to clone a bootstrap element that has data-toggle behavior provided by bootstrap:

HTML

&         


        
      

Answer 1

I have created a JSFiddle of your code. The most possible error seems to that you where using a this.collapsibleObjCounter++ value of 0 that might be creating an issue.

Here is a working JSFiddle. Please let me know if that is what you are trying to do. Thank you.

https://jsfiddle.net/2fgoywzy/1/

---

JS

$( document ).ready(function() {
for (i = 1; i < 5; i++) { 
    var objectContainer =  $("#main");
    var header = objectContainer.clone(true);
    var counter = i; // replace this with this.collapsibleObjCounter++
    var collapseId = "collapsible_obj_" + counter;

    header.find(".collapse").attr("id", collapseId);
    header.find("button[data-toggle='collapse']").attr("data-target", "#"+collapseId);
    $(header).appendTo('body');
}
});

---

HTML

    click here

    

        foo
    

If you are having a value of 0 in this.collapsibleObjCounter++ then i would suggest doing ++this.collapsibleObjCounter. Instead of post increment do pre increment