Jquery UI和Bootstrap按鈕衝突

Question

我在啓動按鈕組時遇到問題。

現在我有jquery ui js在引導js之前調用並且按鈕gorup工作正常。但是，如果我保持這種結構，jquery ui對話框按鈕不起作用，特別是關閉按鈕不會顯示由於衝突的js代碼。

如果我切換順序，然後jquery ui對話框關閉按鈕顯示，但由於兩個js庫之間的衝突，bootstrap按鈕組都被搞砸了。 （「BTN」）：

我一直在使用引導程序的解決方案嘗試。當調用$

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

然後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插件而不是引導按鈕插件。

你需要把你引導加載後noConflict但你加載jQuery用戶界面，例如：

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

Answer 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" 
     ] 
    } 

只需使用你所需要的零件也是很好的做法，並加載完全迴避衝突問題，當作廢頁面大小。希望這也適用於你的情況。

編輯固定錯字