我在bootstrap 3响应式网站上使用fastclick来加快移动设备的响应时间。通常,这没有问题。但是,经过大量测试,我发现这会破坏iPhone上的bootstrap单选按钮。
这些按钮起初会起作用,但是如果您更改选定的选项,则在提交表单时仅传递第一个选定的选项。删除fastclick停止此行为。甚至在我的最小测试页上,甚至添加fastclick都会使行为发生。这种情况在iPhone的Safari和Chrome中都会发生。
我发现有文章说添加jquery-mobile并调整单选按钮的标记也将缩短响应时间。但是我在网站上使用了很多jquery-ui滑块,并添加了jquery移动冲突。我的目的是禁用单选按钮上的fastclick(通过“ needsclicks”类),然后让jqmobile来处理它。
自定义网站的滑块并使其在移动设备上正常工作看起来需要做很多工作。我不想重新设计整个站点,希望添加jqmobile会有所帮助。我们也没有时间。
我该如何解决。令我惊讶的是,在使用带有自选单选按钮的fastclick时找不到其他数据。当然,我可以禁用单选按钮上的快速单击,但是这使它们难以使用,并且此应用程序不接受。
我可以通过某种方式手动修复这些单选按钮以与iPhone配合使用。这在Android上不是问题。我没有找到解决办法吗?
经过一些认真的脑力劳动,我发现问题的根源只有在选择了收音机后才会发生。这都是通过首先将单选按钮IE设置为再次显示具有预先选择的值的表单来实现的。以及当在选择初始值,并且该选项被改变(另一种选择选择的是不同的)。这使我相信,实际上在单选按钮中设置值的过程与fastclick冲突。
我注意到的是,当没有选择任何选项时,它将完美地工作。因此,必须在使用iphone进行测试后,在每个标签的touch事件上添加以下代码。基本上,每次触摸都会完全清除单选按钮。然后,它就像单击单选按钮一样,就像它第一次被选中一样。
$( "#radio_button_label_id").bind( "touchend", function( e ){
resetRadio_radioid( );
})
function resetRadio_radioid( ){
var ids = array('radio_option_1_id', 'radio_option_2_id', 'radio_option_3_id');
for(i=0; i<ids.length;i++){
//clear all checked data
$('#'+ids[i]).prop('checked', false);
$('#'+ids[i]).removeAttr('checked');
}
return true;
}
这完全解决了问题。希望能帮助到你。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句