带有延迟的jQuery / Twitter Bootstrap数据加载文本button
我试图得到这个确切的例子在我的网站上工作：
http://getbootstrap.com/2.3.2/javascript.html#buttons
但是，只需包含这个HTML：
<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button> 不起作用。 我正在运行jQuery 1.7.x并加载了Bootstrap JS文件。
具体来说：我希望button移动到“加载”文本的变化稍微延迟，然后回到常规文本。 似乎没有一个很好的例子可以在网上从我的谷歌search（大多数是要求一个永久的状态改变或切换），Bootstrap网站本身缺乏文档在这里。
在文档页面中，有一个名为application.js的文件被加载。 http://twitter.github.com/bootstrap/assets/js/application.js
// button state demo $('#fat-btn') .click(function () { var btn = $(this) btn.button('loading') setTimeout(function () { btn.button('reset') }, 3000) });
或者只是添加这个，所以它拿起Twitter Bootstrap属性。
$('button[data-loading-text]').click(function () { $(this).button('loading'); });
记下如何接受的答案转换jQuerybutton对象之前运行button（'加载'），因为，虽然这个工作，button（'加载'）将不会工作时，直接使用jQuerybutton对象。
只包括引导库：
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>
这是一个例子：
<!DOCTYPE html> <HTML> <HEAD> <TITLE>Bootstrap Example</TITLE> <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css "> <STYLE> </STYLE> </HEAD> <BODY> <button type="button" class="btn btn-primary" id="btnD" data-loading-text="=)">hola!!!</button> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script> <script type="text/javascript"> $(function(){ $('#btnD').click(function(){ var btn = $(this); btn.button('loading'); }); }); </script> </BODY> </HTML>
此外，jQuery的.delay（）方法可能比setTimeout更容易工作。
只是把一个小js
onclick="$(this).button('loading');"
