Twitter bootstrap input tags not working with Jquery before()

Question

I am using Jquery to clone() a div and change its children\'s id, one of the children is a Bootstrap-tagsinput.

You can find a Demo here.

After clicking

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 how the TagsInput plugin initializes itself. What I would do is create a template of your empty run container and hide it on the page or load it via 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 run to the page in your document.ready() handler.