Question

我正在使用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);

有人有想法吗？

Answer 1

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

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

或者，替代

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

Answer 2

经测试（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。选择带有检查器的选择框 - ＆gt;转到“jQuery events”选项卡并确保附加了“change”事件，只有他，另一个“更改”事件可能会导致问题。
确保表单中没有附带〜“submit”事件 - 它可能会阻止表单提交。
确保表单标记的action属性设置正确或根本没有定义。确保选择框是表单的子项，并且表单已正确关闭。

显然问题是由您无法看到的额外代码引起的 - 如果这些测试不适用于您添加代码或重现问题的演示，我们将更有能力为您提供帮助。

Bootstrap选择不在移动设备上触发更改事件

2 个答案: