Twitter Bootstrap按鈕js無法正常工作

Question

我正在使用Twitter Bootstrap，我似乎無法讓按鈕狀態發生變化。

我正在從http://jsfiddle.net/YCst4/1/復制js，我沒有收到回復。 這就像我沒有加載jQuery，但我在頭文件中加載了bootstrap.min.js。 我在頁面上的其他JavaScript沒有任何問題。

這就是我在Codeigniter視圖中的內容：

<script>
$('#button').button();

$('#button').click(function() {
    $(this).button('loading');
});
</script>

<button class="btn" id="button" type="button" data-text-loading="Loading...">Press Me</button>

關於是什么導致這個的任何想法？ 是bootstrap-button.js不是Bootstrap附帶的bootstrap.min.js的一部分嗎？

http://twitter.github.com/bootstrap/javascript.html#buttons

編輯：

當我查看源頁面時，我可以看到在頭文件視圖中加載了bootstrap.min.js，我可以點擊它來查看它的源代碼，所以路徑是正確的。 但是，按鈕js代碼僅在我在實際內容視圖本身中重復<script src="http://site.dev/assets/admin/js/bootstrap.min.js"></script>時才有效。

我讓jQuery在bootstrap.min.js上面加了一行，並且jQuery元素在與按鈕完全相同的視圖中工作。 我很難過。

Answer 1

我在bootstrap.min.js之后加載了jquery-ui-1.8.21.custom.min.js。 顯然存在一些沖突。

Answer 2

您需要將代碼放入文檔就緒函數中，以便在頁面准備好之后運行，而不是之前運行。

$(document).ready(function(){
  $('#button').button();

  $('#button').click(function() {
    $(this).button('loading');
  });  
});

JS Fiddle似乎會自動為您執行此操作，這就是它在那里工作的原因。

Answer 3

您正試圖在按鈕是DOM的一部分之前將單擊綁定到按鈕。 把你的東西放在文件就緒功能中，你應該沒問題。

Answer 4

對於像我這樣的javascript新手：你還需要在定義$('#button').click() 之前加載jQuery。click $('#button').click()

Answer 5

我最近遇到了同樣的問題。 以下是一些可能對您有所幫助的事情：

1. 您是否按必要的順序加載js文件？ 列出的順序（作為腳本標記）必須是正確的（基於依賴性的）順序，如下所示：

    <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="button_app.js."></script> 

2. 您使用的是本地或遠程css / js文件嗎？ 如果你正在使用遠程的。 檢查它們中是否有人引用github。 如果他們看起來像這樣：

    <script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-alert.js"></script> 

   他們不會工作。 Chrome會拋出mime類型錯誤。