Android 淘汰赛选择问题 - Chrome 和本机浏览器

Question

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

• Chrome - 在下拉列表中选择项目时，每次都会触发更改事件，但 UI 值在焦点更改之前不会更新
• 本机浏览器 - 第一次更改选择时，一切正常。后续所有与select的交互如下
• --- 第一次选择选项时，更改事件不会触发，并且值不会在 UI 上更新
• --- 第二次选择选项，更改事件触发，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 请求带回值，添加到选择列表并加载为标记为 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 原生浏览器独有的，即使我去掉了敲除、引导等，仍然存在一些不一致。

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

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

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

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