javascript - 无法让 Bootstrap 插件工作

Question

http://jsfiddle.net/jzhang172/s83yt1L6/

我无法让按钮正常工作。它应该像 Bootstrap 网站上的这里一样工作:

http://getbootstrap.com/javascript/#buttons

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
    $(function(){
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  });
    });
</script>

Answer 1

您在按钮更改为“正在加载”后立即重置该按钮，因此您看不到它发生了变化。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
    $(function(){
  $('#myButton').on('click', function () {
   
    var $btn = $(this).button('loading');
    setTimeout(function(){$btn.button('reset');}, 1000);
    // business logic...
    
  });
    });
</script>