javascript - Bootstrap 选择不触发移动设备上的更改事件

Question

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

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

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


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


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

有什么想法吗？

Answer 1

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

jsfiddle:Demo with the plugin and latest Bootstrap

问题不在于插件，而在于一些额外的代码。

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

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

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