Android Knockout 选择问题 - Chrome 和 native 浏览器

Question

我在 Android 设备 (Samsung Galaxy Tab4) 上的 native 浏览器和 Chrome 浏览器中遇到了与下拉事件相关的独立但相关的问题。

• Chrome - 在下拉列表中选择一个项目时，每次都会触发更改事件，但 UI 值不会更新，直到焦点被更改
• native 浏览器 - 第一次更改选择时，一切正常。所有后续与select的交互如下
• --- 第一次选择一个选项时，更改事件不会触发并且值不会在 UI 上更新
• --- 第二次选择一个选项时，会触发更改事件，在 UI 上更新值

我正在使用带有 Ajax 调用的 knockout 来填充下拉列表。这是模板代码 html(这里的更改事件只是测试更改事件的警报):

 <div class="col-xs-5 col-sm-5 col-md-2 col-lg-2 search-form-label" data-bind="visibleFade: advancedSearch">
                Proceeding Type
            </div>
            <div class="col-xs-7 col-sm-7 col-md-4 col-lg-4 search-form-data" data-bind="visibleFade: advancedSearch">
                <select class="select-12" data-bind="disabled: !proceedingTypeCodes.loaded(), event: {change: onSelectChange}, value: ProceedingType, options: proceedingTypeCodes, optionsText: 'Name', optionsValue: 'Code', optionsCaption: '-- ALL --'"></select>
            </div>

View 模型实际上是基于从 Ajax 调用返回的模型构建的(使用 json，它创建模型并绑定(bind)到自身。值基于 ajax 请求返回，添加到选择列表并加载是标记为 true。这都是在页面加载时调用的

_dataService.getRemoteSiteData("Case/GetCaseStatusCodes?isForSomething=false", null, _loadCaseStatusCodes);

  var _loadProceedingTypeCodes = function (data) {
    _viewModel.buildModel({ proceedingTypeCodes: data }, _self);
    _self.proceedingTypeCodes.loaded(true);
};

值得一提的是，所有这些都适用于所有其他浏览器、设备和平台。我们甚至还有另一个站点使用完全相同的范例来构建选择列表，效果很好(尽管该搜索页面上只有一个选择列表，而此页面上有多个选择列表)。

有人遇到过这个问题吗？

Answer 1

我相信这个问题是 Android 原生浏览器独有的，即使我去掉了 knockout、bootstrap 等，仍然存在一些不一致。

似乎有效的是使用 jquery 'on' 和 $(this).focus 方法来保证您点击的内容处于焦点位置

$('.container').on('click','select',function(){
    $(this).focus();
});

我使用 on 因为这个调用是在我的 _layout 页面中，所以这些输入在加载时不会出现在页面上(通常)，但它确实可以去任何地方。非常烦人的错误，但我认为这是一个不错的解决方法。

与 chrome 问题相关，这已在 Chrome 40.* 版本中修复