Android 淘汰 Select 问题 - Chrome 和本机浏览器

Question

我在 android 设备 (Samsung Galaxy Tab4) 上的本机和 chrome 浏览器中遇到了与下拉事件相关的单独但相关的问题。

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

我正在使用带有 Ajax 调用的淘汰赛来填充下拉列表。这是模板代码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>

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

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

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

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

有人运行遇到过这个问题吗？

Answer 1

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

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

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

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

与 chrome 问题相关，已在 Chrome 40.* 版本

中修复

Android 淘汰 Select 问题 - Chrome 和本机浏览器

Android Knockout Select Problems - Chrome and Native Browser

android

knockout.js