부트 스트랩 다중 선택 흐림 이벤트가 트리거되지 않음

Question

사용자가 선택을 완료하고 부트 스트랩 다중 선택 드롭 다운 메뉴에서 벗어난 후 일부 로직을 수행하려고합니다.

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

내 뷰 모델에 및 onblur 함수를 정의 :

나는 blur 이벤트에 접선 시도

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

을하지만 개막없는 기능을 않았다. 심지어 $root.onBlur없이 이벤트 바인딩을 설정하려고 시도했지만, 단지 blur: onBlur하지만 작동하지 않았습니다.

https://jsfiddle.net/gtzatrL2/

나는 실종 뭔가 : 여기

샘플 JS 바이올린입니까? 또는 bootstrap multi-select에 적용 할 수없는 blur 이벤트입니까?

모든 항목을 선택한 후 Ajax를 통해 수행 할 백엔드 논리가 있기 때문에 내가 흐리게 처리해야하는 이유가 있습니다. observableArray 변경 사항을 구독하면 원하는 항목이 아닌 추가 된 각 항목에 대한 백엔드 호출이 트리거됩니다.

Answer 1

부트 스트랩 실제로 일본어 숨어 요소를 선택하고 해당 위치에 div를 표시하므로 선택 영역의 흐림 효과가 첫 번째 영역에 집중되지 않으므로 적중되지 않습니다.

내가 생각하기에 부트 스트랩 컨트롤은 div를 사용하기 때문에 div를 일반적으로 포커스 할 수 없기 때문에 블러를 전혀 지원할 수 없을 수도 있습니다. 몇 가지 해결 방법이 있지만이 특정 경우에는 작동하지 않을 수 있습니다. How to blur the div element?

하나의 옵션 대신 observableArray의 속도를 제한하여 옵션을 선택할 때마다 즉시 구독이 실행되지 않도록 할 수 있습니다. 이렇게하면 백엔드 호출도 줄어들지 만 사용자가 완료되기 전에 실행되지는 않을 것이라는 보장은 없습니다.

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

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

Answer 2

여기 작업 예이다 - 사용자 탭 '떨어진 제 2 입력에 흐림 이벤트 콜백 디스플레이는 여러 요소가 선택된 얼마나 때

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