OGeek|极客世界-中国程序员成长平台

标题: javascript - Bootstrap 选择不会在移动设备上触发更改事件 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 14:18
标题: javascript - Bootstrap 选择不会在移动设备上触发更改事件

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

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

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


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


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

谁有想法？

---

Best Answer-推荐答案

经过测试(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 属性设置正确或根本没有定义。确保选择框是表单的子项并且表单已正确关闭。

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

关于javascript - Bootstrap 选择不会在移动设备上触发更改事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28433197/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4