引导选择不会在移动设备上触发更改事件答案

【问题标题】：Bootstrap select don't trigger change event on mobile devices引导选择不会在移动设备上触发更改事件
【发布时间】：2015-04-10 13:48:33
【问题描述】：

我正在使用 Bootstrap select 将原生选择转换为 twitter bootstrap 下拉列表。

我的问题是，在 PC 上的普通浏览器中的 iOS 或 Android 设备上没有触发 change 事件，它是否正常工作。如果我使用库的本机元素支持，则会在这些设备上触发更改事件。

  $('.selectpicker').selectpicker({
      style: 'btn-info',
      size: 4
  });


var submitSearchForm = function() {
    $(this).parents('form').submit();
};


$('.selectpicker').on('blur change', submitSearchForm);

谁有想法？

【问题讨论】：

您的代码是在 jQuery 或等效文档准备好之后加载的吗？
已加载到文档内部
你能告诉我你如何使用 change 事件吗？
库将您的选择更改为按钮下拉菜单，因此请使用$('.selectpicker').on('click','li a', submitSearchForm);
我试一试，但我不确定它是否有效，因为在 PC 上的普通浏览器中，更改事件正在工作。

标签： javascript android jquery ios twitter-bootstrap

【解决方案1】：

经过测试（ios-safari 和 chrome、android chrome、桌面 chrome 和 FF），对我来说效果很好。

jsfiddle：Demo with the plugin and latest Bootstrap

问题不在于插件，可能与一些额外的代码有关。

为测试和调试做一些微小的改变：

移除模糊事件 - 当您单击选择框时，它将提交您的表单，由于某种未知原因，插件会聚焦并在单击选择框时立即模糊选择框。
确保您在 DOM-ready 上触发您的 js - 使用 $(function(){ }); 或将您的脚本放在结束 BODY 标记之前。
更改选择器 - 默认情况下，插件会识别 .selectpicker，仅用于测试，请确保它不会添加一些可能导致不良行为的不良事件。
使用安装了扩展名jQuery debuger 的chrome devtools。使用检查器选择选择框 -> 转到“jQuery 事件”选项卡并确保附加了“更改”事件并且只有他，另一个“更改”事件可能会导致问题。
确保表单没有附加 ~"submit" 事件 - 它可能会阻止表单提交。
确保表单标签的动作属性设置正确或根本没有定义。确保选择框是表单的子项并且表单已正确关闭。

很明显，问题是由我们看不到的您的附加代码引起的 - 如果这些测试对您不起作用，请添加您的代码或重现您遇到的问题的演示，我们将更有能力为您提供帮助。

【讨论】：

感谢您的大力回复和 js fiddle 它证明它似乎有效。现在我必须为我找出问题所在。如果我找到它，我会接受你的回答。

【解决方案2】：

好的，可能是因为页面中引导选择的渲染。这应该工作

$(document).on('change','.selectpicker',submitSearchForm)

或者，替代

$("body").on('change','.selectpicker',submitSearchForm)

【讨论】：

谢谢我试试
我添加了一个替代方案 ;)
在 ios 和 android 上没有帮助，更改事件仍未触发。
也许，它与屏幕尺寸有关，例如@media screen and (max-width: 480px) {...}.