Bootstrap 3单选按钮不适用于iPhone上的fastclick

谢恩

我在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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS:单选按钮不适用于Bootstrap 3

来自分类Dev

Bootstrap3单选按钮不适用于键盘

来自分类Dev

Highcharts不适用于Bootstrap 3模式主体

来自分类Dev

jQuery .on不适用于Bootstrap 3吗?

来自分类Dev

jQuery UI不适用于bootstrap 3 modal

来自分类Dev

Bootstrap 3不适用于PHP MVC .htaccess

来自分类Dev

jQuery UI不适用于bootstrap 3 modal

来自分类Dev

Angular 2 不适用于 Bootstrap 3 或 4

来自分类Dev

Bootstrap崩溃不适用于JQuery

来自分类Dev

Bootstrap scrollspy不适用于Rails

来自分类Dev

Bootstrap模态不适用于Bootstrap轮播

来自分类Dev

Bootstrap模态不适用于Bootstrap轮播

来自分类Dev

垂直居中CSS规则适用于bootstrap3中的行,但不适用于列

来自分类Dev

Bootstrap模态不适用于Clipboard.js(在Firefox上)

来自分类Dev

Bootstrap模态不适用于Clipboard.js(在Firefox上)

来自分类Dev

Bootstrap导航栏collpase按钮可在PC上使用,但不适用于笔记本电脑或手机

来自分类Dev

Bootstrap导航栏collpase按钮可在PC上使用,但不适用于笔记本电脑或手机

来自分类Dev

缩略图轮播不适用于bootstrap-3

来自分类Dev

Bootstrap3 Navbar切换不适用于requirejs

来自分类Dev

字体字形不适用于bootstrap 3和rails 4

来自分类Dev

Bootstrap 3文本中心不适用于行

来自分类Dev

jQuery验证不适用于Bootstrap 3选项卡式表单

来自分类Dev

Bootstrap Carousel Translation3d覆盖不适用于Firefox,IE

来自分类Dev

PHP标头位置不适用于BootStrap 3 [正常标头位置正常工作]

来自分类Dev

Bootstrap 3-导航栏下拉菜单不适用于额外的HTML页面

来自分类Dev

Bootstrap Caret类不适用于ng-bind

来自分类Dev

Bootstrap select插件不适用于jQuery验证

来自分类Dev

Bootstrap has-error不适用于span

来自分类Dev

Angular JS验证不适用于Bootstrap的预输入

Related 相关文章

  1. 1

    AngularJS:单选按钮不适用于Bootstrap 3

  2. 2

    Bootstrap3单选按钮不适用于键盘

  3. 3

    Highcharts不适用于Bootstrap 3模式主体

  4. 4

    jQuery .on不适用于Bootstrap 3吗?

  5. 5

    jQuery UI不适用于bootstrap 3 modal

  6. 6

    Bootstrap 3不适用于PHP MVC .htaccess

  7. 7

    jQuery UI不适用于bootstrap 3 modal

  8. 8

    Angular 2 不适用于 Bootstrap 3 或 4

  9. 9

    Bootstrap崩溃不适用于JQuery

  10. 10

    Bootstrap scrollspy不适用于Rails

  11. 11

    Bootstrap模态不适用于Bootstrap轮播

  12. 12

    Bootstrap模态不适用于Bootstrap轮播

  13. 13

    垂直居中CSS规则适用于bootstrap3中的行,但不适用于列

  14. 14

    Bootstrap模态不适用于Clipboard.js(在Firefox上)

  15. 15

    Bootstrap模态不适用于Clipboard.js(在Firefox上)

  16. 16

    Bootstrap导航栏collpase按钮可在PC上使用,但不适用于笔记本电脑或手机

  17. 17

    Bootstrap导航栏collpase按钮可在PC上使用,但不适用于笔记本电脑或手机

  18. 18

    缩略图轮播不适用于bootstrap-3

  19. 19

    Bootstrap3 Navbar切换不适用于requirejs

  20. 20

    字体字形不适用于bootstrap 3和rails 4

  21. 21

    Bootstrap 3文本中心不适用于行

  22. 22

    jQuery验证不适用于Bootstrap 3选项卡式表单

  23. 23

    Bootstrap Carousel Translation3d覆盖不适用于Firefox,IE

  24. 24

    PHP标头位置不适用于BootStrap 3 [正常标头位置正常工作]

  25. 25

    Bootstrap 3-导航栏下拉菜单不适用于额外的HTML页面

  26. 26

    Bootstrap Caret类不适用于ng-bind

  27. 27

    Bootstrap select插件不适用于jQuery验证

  28. 28

    Bootstrap has-error不适用于span

  29. 29

    Angular JS验证不适用于Bootstrap的预输入

热门标签

归档