Question

我尝试在用户完成选择并远离引导程序多选下拉列表后执行某些逻辑。

我试着勾住模糊事件：

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

在viewModel中定义onBlur函数：

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

但它从未踢过。我甚至尝试在没有$root.onBlur的情况下直接设置事件绑定，只是blur: onBlur但是没有工作。

这是一个JS小提琴示例：

https://jsfiddle.net/gtzatrL2/

我错过了什么吗？或模糊事件不适用于bootstrap多选？

我想要模糊的原因是因为在选择了所有项目后，我有一些后端逻辑要通过Ajax来完成。如果我订阅了我的observableArray更改，它将触发我添加的每个项目的后端调用，这不是我想要的。

Answer 1

Bootstrap实际上隐藏了原始的select元素并在其位置显示了div，因此select上的模糊永远不会被击中，因为它不是首先被聚焦。

我认为因为bootstrap控件正在使用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

这是一个工作示例 - 当用户选项卡＆＃39;远离第二个输入，模糊事件回调显示选择了多少元素

＆＃13;

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());

＆＃13;

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

＆＃13;

Answer 3

fyi这是开发人员github页面的回复

https://github.com/davidstutz/bootstrap-multiselect/issues/1020

基本上是说您应该调用 onDropdownHide 函数，从而为多选插件触发一种“模糊”

Bootstrap多选模糊事件不会触发

3 个答案: