Question

我正在开发一个使用Twitter Bootstrap和jQuery UI的Ruby on Rails应用程序。据我所知，两者之间的大多数（可能都是？）不兼容问题已经解决（我已经安装了最新的宝石并包含在资产管道中）。这个问题与jQuery UI并没有多大关系，我只是认为如果存在兼容性问题我可能会有很多知识，我不知道......

无论如何 - 我只是想在用户的页面上添加几个垂直堆叠的单选按钮，由于某种原因，单选按钮的行为就像常规按钮一样。起初我把它归结为像data-toggle="buttons-raadio"这样可能的错字或类似的东西，但经过检查，我发现我的代码和documentation中建议的格式没有任何区别。最终我感到很沮丧，只是直接从documentation复制粘贴代码（HTML和Javascript以启用按钮）进行试金石，我也有同样的行为。

因此，如果您没有点击该链接，documentation会给出一个简单示例，如下所示：

    <!-- HTML -->
    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-primary">Middle</button>
      <button type="button" class="btn btn-primary">Right</button>
    </div>

    /Javascript
    <script> 
      $('.nav-tabs').button();
    </script>

那么，这笔交易是什么？为什么＆＃34;活跃＆＃34;类没有添加到单击的单选按钮？我觉得有趣的是它说它在课程.nav-tabs上使用它，而不是.btn（我试图无济于事，它只是弄乱了btn-primary的漂亮格式，但仍未给出正确的功能），但我猜测.nav-tabs过滤到了沿线某处的按钮。

另外，所以我决定检查documentation上的html，果然我已经得到完全相同的HTML以及相同的JavaScript调用...我不知所措

提前感谢任何和所有答案。

-MM

Answer 1

我已经做了更多的研究，这似乎是twitter bootstrap和jquery-ui之间的兼容性问题，两者的特定宝石如下：

gem'bootstrap-sass'，'2.1'
gem“jquery-ui-rails”，“〜＆gt; 4.0.0”

所以我实际上并没有使用bootstrap / jquery-ui捆绑的宝石，这可能是我的问题的一部分。点击按钮，我会收到一个Javascript错误：

   Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle' (jquery.js: 552)
   Full trace:
    Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle' jquery.js:552
    jQuery.extend.error jquery.js:552
    (anonymous function) jquery.ui.widget.js:183
    jQuery.extend.each jquery.js:661
    jQuery.fn.jQuery.each jquery.js:272
    $.fn.(anonymous function) jquery.ui.widget.js:179
    (anonymous function) bootstrap-button.js:93
    jQuery.event.dispatch jquery.js:3333
    elemData.handle.eventHandle jquery.js:2942

如果我使用.button()方法实例化每个按钮，我会收到一个不同的错误：

    Uncaught Error: no such method 'toggle' for button widget instance (jquery.js:552)
    Full error trace:
     Uncaught Error: no such method 'toggle' for button widget instance jquery.js:552
     jQuery.extend.error jquery.js:552
     (anonymous function) jquery.ui.widget.js:187
     jQuery.extend.each jquery.js:661
     jQuery.fn.jQuery.each jquery.js:272
     $.fn.(anonymous function) jquery.ui.widget.js:179
     (anonymous function) bootstrap-button.js:93
     jQuery.event.dispatch jquery.js:3333
     elemData.handle.eventHandle jquery.js:2942

要解决这个问题，我已经为每个按钮添加了一个my-button类，并且我自己正在进行点击处理（请记住，您必须确保添加和删除active类根据点击的按钮，我通过addClass()和removeClass()方法执行此操作。

Answer 2

我在上次评论后改变了我的回答。以下是我的一个网站运行完美的示例。我没有必要进行任何类型的调用来启用单选按钮功能。我已经列出了我的页面上正在加载的所有bootstrap js文件的列表。也许你的网站没有加载bootstrap-button.js文件。

<head>
    <script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>

</head>

<div class="stx-button-row">
    <div class="btn-group" data-toggle="buttons-radio">
        <button class="btn stx-button active" id="stx-and" type="button">
            AND
        </button>
        <button class="btn stx-button" id="stx-or" type="button">
            OR
        </button>
    </div>
</div>

Ruby on Rails：Twitter Bootstrap单选按钮不起作用（选择不会停留）

2 个答案: