在 iPhone Safari 上处理带有事件委托的 HTML SELECT 选项到 javascript答案

【问题标题】：Handling HTML SELECT Options with event delegation to javascript on iPhone Safari在 iPhone Safari 上处理带有事件委托的 HTML SELECT 选项到 javascript
【发布时间】：2011-04-22 02:40:15
【问题描述】：

我们正在开发一个 Web 应用程序，该应用程序具有定制的 GUI 以在 iPhone 上使用。应用程序上的一个页面有 3 个后续的 SELECT 下拉菜单，其中从第一个下拉菜单中选择一个选项会派生第二个下拉菜单的选项，依此类推。随后的下拉选项由 javascript 基于上一个下拉列表上的 onchange 事件填充。问题是，在 iPhone 上，SELECT 选项出现时带有“上一个”和“下一个”链接，用于移动到上一个和下一个控件。单击“下一个”链接时，控件将移动到下一个 SELECT 并显示选项。 javascript 由前一个 SELECT 的 onchange 事件触发，并填充下一个 SELECT 的选项。但是在 2nd SELECT 的下拉列表中，会在 javascript 重新填充之前显示以前的选项。是否有一种解决方法或事件可以顺序执行 javascript，然后选择下一个控件？在选择 SELECT 选项时以及在控制离开 SELECT 元素之前是否可以触发任何事件？是否有用于 SELECT 下拉选项显示的 Next 和 Previous 链接的句柄？

【问题讨论】：

我也遇到了同样的问题。
这里也有同样的问题。仍然没有解决方案。
我无法重现您遇到的问题。这个simple demo 似乎在我运行 iOS 3.1 的第一代 ipod touch 上完美运行
我的 iPhone 4 运行 iOS 4.1(?) 在那个演示中也有同样的问题。你确定你按下了下拉界面上的“下一步”按钮吗？

标签： javascript iphone html events safari

【解决方案1】：

也许你可以使用焦点事件，在 jQuery 中是这样的：

$('#select2').focus(function () {
    // update select2's elements
});

虽然真正的问题是 iPhone 过载何时到来，以及事件何时被触发。在此视图中也可以更改选择选项。

【讨论】：

我遇到了和 OP 一样的问题。我已经尝试过 focus()、blur() 和 change()，但 iPhone 似乎仍在缓存列表内容，直到您再次点击 Next/Prev。
是的，同样，尝试了 focus()、blur() 和 change()，这些都不起作用。另外，为什么要支持那些不起作用甚至没有经过测试的东西。

【解决方案2】：

我在我的网站上遇到了同样的问题。我可以通过手动轮询选择控件上的selectedIndex 属性来修复它。这样，只要您“检查”列表中的项目，它就会触发。这是我为此编写的一个 jQuery 插件：

$.fn.quickChange = function(handler) {
    return this.each(function() {
        var self = this;
        self.qcindex = self.selectedIndex;
        var interval;
        function handleChange() {
            if (self.selectedIndex != self.qcindex) {
                self.qcindex = self.selectedIndex;
                handler.apply(self);
            }
        }
        $(self).focus(function() {
            interval = setInterval(handleChange, 100);
        }).blur(function() { window.clearInterval(interval); })
        .change(handleChange); //also wire the change event in case the interval technique isn't supported (chrome on android)
    });
};

您可以像使用“更改”事件一样使用它。例如：

$("#mySelect1").quickChange(function() { 
    var currVal = $(this).val();
    //populate mySelect2
});

编辑：当你点击它来选择一个新的值时，Android 不会聚焦选择，但它也不存在与 iphone 相同的问题。因此，通过同时连接旧的 change 事件来修复它。

【讨论】：