Click bootstrap login tags not working with jQuery before ()

Question

I use jQuery to clone () the div and change my child id, one of them is Bootstrap-tagsinput .

You can find a demo here .

After clicking add new start , a new div is added, but the tag input cannot be changed !!

here is my code (and you can view the full code here ):

$('#addrun').click(function () { var s = $('#run1') .clone() .attr('id', '#run' + (++runNum)) .wrap('<div>'); s.find('#tag1').attr('id', 'tag2'); $('#tag2').tagsinput(); $('#addrun').before(s.parent().html()); $(".well").on('click', '.expandbtn', function () { var $this = $(this).parent(); var $collapse = $this.closest('.RunWell').find('.SystemFiles'); $collapse.collapse('toggle'); }); $('.SystemFiles').collapse('collapse'); }); 

Answer 1

Try calling .tagsinput() on #tag2 after adding it to the page.

 $('#addrun').before(s.parent().html()); $('#tag2').tagsinput(); 

Edit:

This is probably due to the way the TagsInput module initializes itself. What I would do is create a template for your empty launch container and hide it on the page or load it using JavaScript.

 <div class="control-group hide" id="ControlGroupTemplate"> <label class="control-label" for="textarea">Tools :</label> <input type="text" class="tags" id="tag1" value="Amsterdam,Washington,Sydney,Beijing" data-role="tagsinput" /> <br /> <div class="SystemFiles" data-role="collapsible"> <!-- File Button --> <div class="control-group"> <label class="control-label" for="filebutton">OP Customer DLIS files (PUC)</label> <div class="controls"> <input id="filebutton" name="filebutton" class="input-file" type="file"> </div> </div> <!-- File Button --> <div class="control-group"> <label class="control-label" for="filebutton">OP logup DLIS files (LUP)</label> <div class="controls"> <input id="file1" name="filebutton" class="input-file" type="file"> </div> </div> <!-- File Button --> <div class="control-group"> <label class="control-label" for="filebutton">OP Producer DLIS files (PUP)</label> <div class="controls"> <input id="file2" name="filebutton" class="input-file" type="file"> </div> </div> <!-- File Button --> <div class="control-group"> <label class="control-label" for="filebutton">OP well folder</label> <div class="controls"> <input id="file3" name="filebutton" class="input-file" type="file"> </div> </div> <div class="control-group"> <label class="control-label" for="filebutton">Prints</label> <div class="controls"> <input id="file4" name="filebutton" class="input-file" type="file"> </div> </div> </div> <button class="btn btn-mini link-btn expandbtn" id="exp" type="button">expand toggle</button> <button class="btn btn-mini btn-primary"><span class="glyphicon glyphicon-arrow-down"> </span>Duplicate</button> </div> 

Then you clone the ControlGroupTemplate and apply the TagsInput method to it.

 var s = $('#ControlGroupTemplate') .clone() .attr('id', '#run' + (++runNum)) .wrap('<div>'); s.find('#tag1').attr('id', 'tag2'); $('#addrun').before(s.parent().html()); $('#tag2').tagsinput(); 

I would even use this method to add your initial launch to the page in your document.ready() handler.