javascript - Bootstrap 选择不会在移动设备上触发更改事件
<p><p>我正在使用 <a href="http://silviomoreto.github.io/bootstrap-select/" rel="noreferrer noopener nofollow">Bootstrap select</a>将原生选择转换为 <a href="http://getbootstrap.com/" rel="noreferrer noopener nofollow">twitter bootstrap</a>下拉列表。</p>
<p>我的问题是 <code>change</code> 事件未在 PC 上的普通浏览器中的 iOS 或 Android 设备上触发，它是否正常工作。如果我使用库的原生元素支持，则会在这些设备上触发更改事件。</p>
<pre><code>$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
var submitSearchForm = function() {
$(this).parents('form').submit();
};
$('.selectpicker').on('blur change', submitSearchForm);
</code></pre>
<p>谁有想法？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>经过测试(ios-safari 和 chrome、android chrome、桌面 chrome 和 FF)，对我来说效果很好。</p>
<p><strong>jsfiddle</strong>:<a href="http://jsfiddle.net/0bduj8qp/" rel="noreferrer noopener nofollow">Demo with the plugin and latest Bootstrap</a> </p>
<p>问题不在于插件，可能与一些额外的代码有关。</p>
<p>为测试和调试做一些微小的改变:</p>
<ul>
<li>删除模糊事件 - 当您单击选择框时，它将提交您的表单，由于某种未知原因，插件焦点并在单击选择框时立即模糊选择框。</li>
<li>确保您在 DOM 就绪状态下触发您的 js - 使用 <code>$(function(){ });</code> 或将您的脚本放在结束 BODY 标记之前。</li>
<li>更改选择器 - 默认情况下，插件会识别 <code>.selectpicker</code>，仅用于测试，请确保它不会添加一些可能导致不良行为的不良事件。</li>
<li>使用扩展名为 <a href="https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=en" rel="noreferrer noopener nofollow">jQuery debuger</a> 的 chrome devtools安装。使用检查器选择选择框 -> 转到“jQuery 事件”选项卡并确保附加了“更改”事件并且只有他，另一个“更改”事件可能会导致问题。</li>
<li>确保表单没有附加 ~"submit"事件 - 它可能会阻止表单提交。</li>
<li>确保表单标签的 Action 属性设置正确或根本没有定义。确保选择框是表单的子项并且表单已正确关闭。 </li>
</ul>
<p>很明显，问题是由我们看不到的您的附加代码引起的 - 如果这些测试对您不起作用，请添加您的代码或重现您遇到的问题的演示，我们将更有能力为您提供帮助。 </p></p>
<p style="font-size: 20px;">关于javascript -Bootstrap 选择不会在移动设备上触发更改事件，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/28433197/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/28433197/
</a>
</p>
页:
[1]