http://stackoverflow.com/questions/42673800/bootstrap-multiselect-blur-event-not-triggering

Example using Bootstrap-Multiselect with Knockout

by jlspake

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.2.0.debug.js"></script>
<script src="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <label for="select1">Test 1 - Binding to simple arrays</label>
      <br/>
      <div id="select1wrapper" style="display:inline-block;">      
          <select id="select1" multiple="multiple" class="form-control" data-bind="options: availableValues, selectedOptions: selectedValues, multiselect: {
    includeSelectAllOption: true
  }">
          </select>    
      </div>  
    </div>
    <div class="col-sm-6">
      <label for="select2">Test 2 - Binding to objects</label> 
      <br />
      <select id="select2" multiple="multiple" class="form-control" data-bind="options: availableObjects, optionsText: 'name', optionsValue: 'id', selectedOptions: selectedIds, multiselect: {
    includeSelectAllOption: true
  }">
      </select>      
    </div>
  </div>
  <div class="row" style="margin-top: 20px;">
    <div class="col-sm-12">
      <pre id="koDebugData" data-bind="text: ko.toJSON($root, null, 4)"></pre>
    </div>
  </div>
</div>

JavaScript

$(function() {
	var viewModel = { 
  	availableValues: ko.observableArray(["value 1","value 2","value 3","value 4","value 5"]), 
    selectedValues: ko.observableArray(["value 2","value 5"]),
    availableObjects: ko.observableArray([{id:1,name:"object 1"}, {id:2,name:"object 2"},{id:3,name: "object 3"},{id:4,name:"object 4"},{id:5,name:"object 5"}]),
    selectedIds: ko.observableArray([2,5]),
    isSelecting: ko.observable(false),
    onBlur: function(){
    	alert('OnBlur');
    }
  };
  
  viewModel.selectedValues.subscribe(function(){
  	viewModel.isSelecting(true);
  });
  
	ko.applyBindings(viewModel);
  
  $("body").click(function(e) {
    if(e.target.id !== 'select1wrapper'){
      if(viewModel.isSelecting()){
      	viewModel.isSelecting(false);
        viewModel.onBlur();
      }
    }      
  });

});