问答详情
源自：4-6 按钮插件--按钮加载状态

Bootstrap3.3.5官网文档中 按钮的加载状态的代码 与本节代码不一样，但官网的代码 点击按钮无反应，是哪里出错了？

官网代码：

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">

  Loading state

</button>


<script>

  $('#myButton').on('click', function () {

    var $btn = $(this).button('loading')

    // business logic...

    $btn.button('reset')

  })

</script>

测试代码：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>按钮插件--按钮加载状态</title>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>

    body{padding:10px;margin:10px;}

</style>

</head>

<body>

    <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> Loading state </button> 

  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script> 

  $(#myButton).on('click', function () {     

    var $btn = $(this).button('loading')        

  $btn.button('reset')   }) 

</script>

</body>

</html>


提问者：我必win 2016-01-09 19:49

个回答

  • 李晓健
    2016-01-09 20:35:40
    已采纳 

    $(function(){
    //这里#myButton 要加引号
    $('#myButton').on('click', function () {
        //这里只能写 loading  不能写 loadding
        var $btn = $(this).button('loading');
        //这里加一个定时是为了看效果,不然的话上面设成loading然后下面代码会立刻执行,所以就看不到变化
        setTimeout(function(){
            $btn.button('reset');
        },2000);
    })
})


    0