Jquery UI和Bootstrap按钮冲突

时间:2014-10-03 14:01:57

标签: jquery-ui button twitter-bootstrap-3 buttongroup

我的bootstrap按钮组出现问题。

现在我在引导程序js之前调用了jquery ui js,按钮gorup工作正常。但是,如果我保留此结构,则jquery ui对话框按钮不起作用,特别是由于js代码冲突而无法显示关闭按钮。

如果我切换顺序然后jquery ui对话框关闭按钮显示,但由于两个js库之间的冲突,引导程序的按钮组全部搞砸了。

我尝试过使用bootstraps解决方案:

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

3 个答案:

答案 0 :(得分:12)

如果你只是谷歌那个错误信息,你会看到it's a jQuery UI error message,所以你代码中的$.fn.button指的是jQuery UI Button插件,不是Bootstrap Button插件

您需要在加载Bootstrap之后但在加载jQuery UI之前放置noConflict,例如:

<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(...)

答案 1 :(得分:2)

如果您正在使用gulp或Grunt来构建资产(例如使用main-bower-files),则选项将不包括整个jQueryUI。只需拿走你需要的部件,然后跳过按钮和工具提示。根据我的经验,这两者是冲突最多的。

例如,将以下部分放在bower.json中:

"overrides":
    "jqueryui": {
        "main": [
            "ui/core.js",
            "ui/widget.js",
            "ui/mouse.js",
            "ui/datepicker.js",
            "ui/draggable.js",
            "ui/droppable.js",
            "ui/resizable.js",
            "ui/selectable.js"
        ]
    }

使用所需的部件也是一种很好的做法,可以在加载时完全消除页面大小并完全避免冲突问题。希望这也适用于您的情况。

编辑修复错误

答案 2 :(得分:0)

我知道这是一个旧帖子,但我遇到了同样的问题。我有 Bootstrap 3.0.3 并将其升级到版本 >=3.4.1 解决了这个问题。

 $('.btn').button();
 $('input[type=radio]').on('change', function() {
   var target = "#" + $(this).data("target");
   $(".chart").not(target).hide();
   $(target).show();
   kendo.resize($(".k-content"));
 });
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:non;">
  <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>
</div>
https://jsfiddle.net/codinglattice/gu4mjaep/29/