Question

我在使用jquery移动按钮时遇到问题; 如果我使用这样的按钮：

<a data-role="button" href="index.html" data-theme="b">SKIP</a>

单击时会产生颜色变化效果; 但现在我想把东西传递给下一页，所以我必须使用其他方式，如

    <head >
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>jQuery Mobile Demos</title>
       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
       <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">   </script>
       <script type="text/javascript"></script>
   </head>    
   <body>
     <div id="test.html" data-role="page">
        <div data-role="content">
            <a data-role="button" data-theme="b" id="btn">SKIP</a>
        </div>
     <script type="text/javascript">
      $(document).on('click','#btn',function(event){
        $.mobile.changePage("index.html");
      });
    </script>
  </body>

然后问题发生了，按钮不再有颜色变化效果.. 有人可以帮我一个忙吗？

Answer 1

您应该通过添加href="#"然后在e.preventDefault()绑定中使用click来使用它：

<强>标记

<a data-role="button" href="#" data-theme="b" id="btn">SKIP</a>

<强> JS

$(document).on('click','#btn',function(e){
     e.preventDefault();
     $.mobile.changePage("index.html");
});

jquery移动按钮在导致点击事件时没有颜色变化效果

1 个答案: