jquery selectpicker not working for dynamically generated content

Question

I have used following library to design select box

https://silviomoreto.github.io/bootstrap-select/examples/

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

Its working fine for first div .if i generate item from dynamically using jquery then its not showing

$('#add_new_repair').click(function(){

 i++;

var mydata='<div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Parts Name <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="brand_name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="Model Name e.g Nokia 1100" required="required" type="text"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <button type="button" class="btn btn-primary" id="remove_repair_'+i+'" onclick="removeRow(this);> <span class="glyphicon glyphicon-minus" aria-hidden="true"> </span>Remove</button> </div> </div> <div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Parts Price <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="brand_name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="Price" required="required" type="text"> </div> </div> <div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Parts Warrenty<span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <select id="basic" class="selectpicker show-tick form-control" data-live-search="true"> <option value="AK" selected>---Select--</option> <option value="ss">Alaska</option> <option value="HI">Nokia</option> <option value="CA">Motorolla</option> <option value="NV">Samsung</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> </select> </div> </div> <div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Image <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input type="file" id="input03" class="form-control"> </div> </div> <div class="ln_solid"></div>';
   var content = '<select class="pincode"><option value="1">1</option><option value="2">2</option></select>';
 $("#dynamic_data").append(mydata);


});

Answer 1

You are dynamicaly generating select list so after appending content you have to forcefully render selectpicker for dynamically generated select list by following below line

$('.selectpicker').selectpicker('render');

Answer 2

Also, for every change inside html at selectpicker you need to call refresh function. I think that is better than render.

$('.selectpicker').selectpicker('refresh');

Answer 3

you have to use on or dynamically created elements

$(document).on('click','#add_new_repair',function(){

// your code here

})