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 вызова содержания, чтобы попасть в модальных class.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

Вам придется повторно инициализировать selectpicker после добавления HTML-

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 элементах