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.

  Tools :
  
  

  

    
    

      OP Customer DLIS files (PUC)
      

        
      
    

    
    

      OP logup DLIS files (LUP)
      

        
      
    

    
    

      OP Producer DLIS files (PUP)
      

        
      
    

    
    

      OP well folder
      

        
      
    

    

      Prints
      

        
      
    
  
  expand toggle
  
  Duplicate

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

var s = $('#ControlGroupTemplate')
  .clone()
  .attr('id', '#run' + (++runNum))
  .wrap('
');

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.