jQuery .on点击功能在手机屏幕上不起作用

Question

我想单击移动屏幕上的按钮，旋转卡，但是单击后不起作用，我不知道为什么。我在大屏幕上运行代码的地方工作正常，我不需要。我需要使用它仅在移动屏幕上进行翻页卡

我尝试.click（）函数，.css（）函数，.on（'click'，function（）{}）

    <div class="layout">

        <div class="content">
            <div class="container">

                <div class="row">

                    <div class="offset-lg-2"></div>                        
                    <div class="col-lg-4 mobile-flip-card">
                        <div class="services-description">

                            <h1>HTI Services</h1>

                            <p class="lead">This site provide some 
                             services to HTI,s students</p>

                            <p class="lead">
                                Students can complain about anything they 
                                 want and also can do the questionnaire 
                                 to can access their results
                            </p>
                            <a href="#">Read More</a>
                        </div>
                    </div>            



                    <div class="col-lg-4  mobile-flip-card">

                        <div class="login-form">

                            <h2>Sign <span>In</span></h2>


                            <form action="" method="post">

                                <input type="text" name="username" required placeholder="Username" maxlength="8"/>

                                <input type="password" name="password" required placeholder="Password" maxlength="15"/>

                                <input type="submit" name="submit" value="Sign In">
                            </form>

                            <a href="#">Forget Password!?</a>

                        </div>
                    </div>        

                    <div class="offset-lg-2"></div>
                </div>
            </div>
        </div>
    </div>

    <script>

      $(document).ready(function () {
               'use strict';

     if($('body').outerWidth() < 567)
    {
      $('.mobile-flip-card .services-description a').text('Sign In');


      $('.mobile-flip-card .services-description button').on('click' 
          ,function () {
              $('.content:hover').css('transform',"rotateY(180deg)")
            });
     }else
       {
          $('.mobile-flip-card .services-description a').text('Read 
           More');

       }



    });
    </script>

</body>

控制台没有错误