jquery-ui - Jquery UI 和 Bootstrap 按钮冲突

Question

我在使用 bootstrap 的按钮组时遇到问题。

现在我在 bootstrap js 之前调用了 jquery ui js，并且按钮组工作正常。但是，如果我保留此结构，jquery ui 对话框按钮将不起作用，特别是由于 js 代码冲突，关闭按钮不会显示。

如果我切换顺序，则显示 jquery ui 对话框关闭按钮，但由于两个 js 库之间的冲突，bootstrap 的按钮组都搞砸了。

我曾尝试使用 bootstrap 解决方案:

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

然后在调用 $(".btn").bootstrapBtn() 并在每次单击组中的新按钮时测试按钮组时出现错误:

cannot call methods on button prior to initialization; attempted to call method 'toggle'

我做了大量的研究，但仍然无法提出解决方案。

这是我的代码:

<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:none;">
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
    </label>
    <label class="btn btn-default">
        <input class="pieChart" data-target="pie-section"  type="radio" name="options" id="pie"> Pie
    </label>        
    <label class="btn btn-default">
        <input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
    </label>
</div>

 <div class="bar-section k-content">
     <div class="chart" id="barChart"></div>
 </div>

 <div class="container-fluid pie-section k-content">
     <div class="row chart" id="pie-section"></div>
 </div>

 <div class="column-section k-content">
     <div class="chart" id="columnChart"></div>
 </div>

和我的 JS 来处理按钮:

 $('.btn').button();

 $('input[type=radio]').on('change', function () {
    var target = "#" + $(this).data("target");
    $(".chart").not(target).hide();
    $(target).show();
    kendo.resize($(".k-content"));
 });

PS:使用 Jquery UI 版本 1.11.1 和 Jquery 版本 1.11.1

Answer 1

如果您只是在 Google 上搜索该错误消息，您会看到 it's a jQuery UI error message ，所以 $.fn.button此时您的代码指的是 jQuery UI Button 插件，而不是 Bootstrap Button 插件。

你需要把noConflict在加载 Bootstrap 之后但在加载 jQuery UI 之前，例如:

<script src="/foo/jquery.min.js"></script>
<script src="/foo/bootstrap.min.js></script>
<script>
  $.fn.bootstrapBtn = $.fn.button.noConflict();
</script>
<script src="/foo/jquery.ui.js"></script>

然后您将需要使用 $(...).bootstrapBtn(...)而不是 $(...).button(...)在您的其余代码中。