jquery selectpicker不适用于动态生成的内容答案

【问题标题】：jquery selectpicker not working for dynamically generated contentjquery selectpicker不适用于动态生成的内容
【发布时间】：2017-01-30 17:29:37
【问题描述】：

我使用以下库来设计选择框

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>

它对第一个 div 工作正常。如果我使用 jquery 动态生成项目，那么它不会显示

$('#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);


});

【问题讨论】：

$('.selectpicker').selectpicker('render'); 在将content 附加到dynamic_data 后使用它来呈现选择器
@Curiousdev.Thanks 现在工作正常。请添加答案以便我接受

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

您正在动态生成选择列表，因此在附加内容后，您必须按照以下行强制呈现 selectpicker 以动态生成选择列表

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

【讨论】：

【解决方案2】：

此外，对于 selectpicker 中 html 内的每次更改，您都需要调用刷新函数。我认为这比渲染更好。

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

【讨论】：

它会起作用，但基本上“刷新”是为了操作选择列表，而不是根据我们的操作更新 UI，这就像一个魅力，没有冒犯，但我不推荐使用这个取而代之的是 render 强制重新渲染已动态添加的引导选择

【解决方案3】：

您必须使用on 或动态创建的元素

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

// your code here

})

【讨论】：

@ameya.Thanks 但不起作用。其他输入框正在生成 .select 框未显示
@ameya: Jquerys "$('#add_new_repair').click(function(){" 意思一样.. ;)
其他输入框正在生成。选择框不显示。没有错误
即使我使用markusslima.github.io/bootstrap-filestyle这个库来设计文件上传。在这里我得到了浏览按钮，但没有显示
@J.Sadi 我认为他们不是。据我所知。如果在加载 DOM 后添加元素，则必须使用 .on 处理它们的点击事件