javascript - Bootstrap Selectpicker 不适用于全局模式

Question

我用这个做了一个全局模态

<div id="GlobalModal" class="modal fade" role="dialog">
 <div class="modal-dialog">
    <style>
        #GlobalModal .modal-body .body-content {
            margin:0;
            width: 100%;
        }
    </style>
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header" style="background:#337ab7;">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title" style="color:white">Not set...</h4>
        </div>
         <div class="modal-body">

         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

这是我调用模态的按钮

<button id="new-communication" type="button" class="btn btn-info btn-sm">NEW <i class="glyphicon glyphicon-plus"></i></button>

这是内容

<div class="hidden">
 <div id="mc-communication">
  <form id="loginForm"  class="form-horizontal" role="form" method="POST" action="" >
  <div class="form-group">
    <label class="col-sm-2 control-label">Type</label>
      <div class="col-sm-10">
        <select class="form-control selectpicker show-tick" name="SingleSelectFieldType">
          <option></option>
          <option>Mobile - Private</option>
          <option>Mobile - Office</option>
          <option>Others</option>
        </select>
        </select>
      </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Value</label>
      <div class="col-sm-10 col-md-10">
          <input class="form-control" type="tel" id="input-mobile-number" placeholder="" name="MobileNumberFieldType">
      </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label"></label>
      <div class="col-sm-10">
        <div class="[ form-group ]">
          <input type="checkbox" checked />
            <span></span><span> </span></label>
              <label>Primary</label>
        </div>
      </div> 
  </div>
 </form>
 </div>
</div>

这是我调用内容进入模态的 jQuery类.modal.js

var Modal = {
 Me: $('#GlobalModal'),
 Title: 'Undefined Title',
  Width: { xs: '25%', sm: '40%', md: '55%', lg: '70%', xl: '85%', full: '95%' },
 Show: function (params) {
   this.Me.find('.modal-body').empty();
   this.Me.find('.modal-title').text((this.Title == null) ? this.Title : params.Title);

   if(params.Content.substr(0, 1) == '#') { //To Check if content may come from a view or a div
     this.Me.find('.modal-body').append($(params.Content).clone());
   } else {
     this.Me.find('.modal-body').load(params.URI);
   }

   this.Me.find('.modal-dialog').css('width', this.Width[params.Width]);
   this.Me.modal('show');
 }
}

以及在我看来要调用的脚本

  $(document).ready(function(){
    $('#new-communication').on('click', function(){
     Modal.Show({
      Title: 'Communication',
      Content: '#mc-communication',
      Width: 'sm'
    });
   });
 });

问题是我可以在我的选择中看到内容，但我无法选择它，而且那里还有一个复选框，但我无法选中它。我尝试制作一个新的非全局模式，但仅用于通信，它起作用了，我不知道我的代码有什么问题。

Answer 1

添加 html 后，您必须重新初始化 selectpicker

if(params.Content.substr(0, 1) == '#') { //To Check if content may come from a view or a div
    this.Me.find('.modal-body').append($(params.Content).clone());

    // This will reinitialize selectpicker. You may need to revalidate this logic since you are appending data and not replacing.
    $('.selectpicker').selectpicker();
} else {
    this.Me.find('.modal-body').load(params.URI, function() {
        // Initialize the selectpicker after loading the data
        $('.selectpicker').selectpicker();
    });
}

发生这种情况的原因是，html 数据是动态的，selectpicker 未在新添加的 html 元素中初始化