Bootstrap 3单选按钮在iPhone上使用fastclick无法正常工作

Question

我正在使用fastclick来加速我的响应式网站在移动设备上的响应时间。一般情况下，这个工具运行良好，没有问题。 然而，经过多次测试，我发现这会导致iPhone上的bootstrap单选按钮出现问题。

按钮最初可以正常工作，但如果您更改所选选项，则只有第一个选择的选项在提交表单时传递。 删除fastclick可以解决此问题。 或者更准确地说，在我的测试页面上添加fastclick会导致此问题发生。 这在iPhone的Safari和Chrome浏览器中都会发生。

我发现有些文章说添加jquery-mobile并调整单选按钮的标记也可以提高响应时间。 然而，我在网站中已经大量使用了jquery-ui滑块，并且添加jquery mobile会产生冲突。 我的目标是通过“needsclicks”类在单选按钮上禁用fastclick，并让jqmobile来处理它。

为了使滑块在移动设备上能够正常工作并呈现良好的外观，我们付出了很多努力。我不想为了添加jqmobile而重新设计整个网站。我们也没有时间这样做。

我该如何解决这个问题。我惊讶地发现在使用fastclick和bootstrap单选按钮时没有找到其他数据。当然，我可以在单选按钮上禁用fastclick，但这使它们难以使用，这对于此应用程序是不可接受的。

有没有一种方法可以手动修复这些单选按钮以在iPhone上工作。 在Android上没有这个问题。 我是否遗漏了某些修复方法？

- Shane

Answer 1

在iPad上也出现了这个问题。

问题：Fastclick触发了两次点击事件：一次是对标签的点击，另一次是（冒泡的）对input:radio的点击。

解决方案：在input:radio字段上使用“needsclick”类。更多信息： https://github.com/ftlabs/fastclick#use-case-2-twitter-bootstrap-222-dropdowns

- JelleSlowack

---

我还需要在标签和标签内的span上添加needsclick。 - Bryan Larsen

Answer 2

经过一番认真的脑力运转，我发现问题的原因只会在选择了收音机后才会发生。这既是通过最初设置单选按钮即显示一个带有预选值的表单，也是当选择了另一个不同的选项（即更改了初始值）时。这让我相信实际设置单选按钮值的过程与快速点击存在冲突。

我注意到的是，当没有选择任何选项时，它将完美地工作。因此，在使用 iPhone 进行大量测试后，我在每个标签的触摸事件中添加了以下代码。基本上，每次触摸时都会完全清除单选按钮。然后它就像每次单选按钮被按下一样，就像第一次初始选择一样。

$( "#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;
        }

这完全解决了问题。 希望能有所帮助。

- Shane