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

来源:4-6 按钮插件--按钮加载状态

我必win

2016-01-09 19:49

官网代码:

<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>


写回答 关注

1回答

  • 李晓健
    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);
        })
    })


    陈小晓

    请问点击按钮文字变成加载中后,怎么是鼠标禁用? $(function(){ $("#myButton").on('click',function(){ var $btn = $(this).button('loading'); $(this).css('cursor','not-allowed'); setTimeout(function(){ $btn.button('reset'); $(this).css('cursor','default'); },2000); }); });

    2016-08-23 16:42:36

    共 2 条回复 >

玩转Bootstrap(JS插件篇)

带领大家学习怎么使用JS自由控制Bootstrap中提供的组件

128654 学习 · 296 问题

查看课程

相似问题