引導Selectpicker不工作在全局模式

我做了一個全球性的模式與此引導Selectpicker不工作在全局模式

<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>

按鈕，這是content

<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>

，這是我的呼籲內容，以進入模式 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' 
    }); 
    }); 
});

事情是我能看到的jQuery我的選擇內容，但我不能選擇它，我也有一個複選框，我無法檢查它。我嘗試了一種新的模式，它不是全局的，只是爲了溝通，而且它工作正常，我不知道我的代碼有什麼問題。

來源

2017-01-03 GGw

請張貼JSfiddle，CodePen或代碼段 –

你可能會有相同的ID元素.. –

沒有先生，它只是當即時通訊使用全球模式我選擇將無法正常工作，當我用它的內容新的模式，它的作品 – GGw

你將不得不追加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(); 
    }); 
}

Ÿ發生這種情況的原因後，重新初始化selectpicker，HTML數據是動態的，selectpicker沒有在新增加的HTML元素初始化

來源

2017-01-03 06:31:43

引導Selectpicker不工作在全局模式

回答

相關問題