ブートストラップマルチセレクションブラーイベントがトリガーされない

Question

ユーザーが選択を完了し、ブートストラップマルチセレクトドロップダウンから離れた後にロジックを実行しようとしています。

私はblurイベントをフックしようとした：

onBlur: function(){ 
    alert('OnBlur'); 
} 

しかし、それはキックなかっインを決して：

私のViewModelにonBlurイベント機能を定義

 <select id="select1" multiple="multiple" class="form-control" data-bind="options: availableValues, selectedOptions: selectedValues, multiselect: { 
    includeSelectAllOption: true 
    }, event: { blur: $root.onBlur}"> 
     </select> 

。私は$root.onBlur、ただblur: onBlurのせずに直接イベントバインディングを設定しようとしましたが、うまくいきませんでした。ここで

は、サンプルJSフィドルです：

https://jsfiddle.net/gtzatrL2/

私は何かが足りないのですか？またはブートストラップマルチ選択に適用されないブラーイベントですか？

私がぼかしをかけたいのは、すべての項目が選択された後にAjaxを実行するバックエンドロジックがあるからです。 observableArrayの変更を購読すると、追加したアイテムごとにバックエンドコールが発生しますが、これは私が望むものではありません。

Answer 1

ブートストラップは、実際に元を隠しています要素を選択してその場所にdivを表示するので、最初の場所にフォーカスされていないため、選択範囲のぼかしは一度もヒットしません。

divを使用しているため、divが通常フォーカスできないため、ぼかしをサポートすることができない可能性があります。いくつかの回避策がありますが、この特定のケースでは機能しない可能性があります。 How to blur the div element?

オプションを選択するたびにサブスクリプションが即座に発生しないようにobservableArrayをレート制限することができます。これにより、バックエンドコールも削減されますが、ユーザーが終了する前に起動しないことは保証されません。

http://knockoutjs.com/documentation/rateLimit-observable.html

this.selectedValues = ko.observableArray().extend({ rateLimit: { timeout: 500, method: "notifyWhenChangesStop" } }); 

this.selectedValues.subscribe(function() { 
    alert("BLUR: " + this.selectedValues().length + " elements selected"); 
}); 

Answer 2

ここで作業例だ - ユーザーのタブ "離れて第二の入力にblurイベントコールバックが表示され、多くの要素が選択されたどのようにするとき

var ViewModel = function() { 
 
    this.availableValues = ko.observableArray(["Option A", "Option B", "Option C"]); 
 
    this.selectedValues = ko.observableArray(); 
 

 
    this.onBlur = function() { 
 
     alert("BLUR: " + this.selectedValues().length + " elements selected"); 
 
    } 
 
}; 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<select id="select1" multiple="multiple" class="form-control" data-bind="options: availableValues, selectedOptions: selectedValues, multiselect: { includeSelectAllOption: true },event: { blur: $root.onBlur}"> 
 

 
<input type="text">