如何使用 JQuery 手机

Question

我正在研究 jQuery 移动设备，但我无法弄清楚为什么这段代码在我的脚本中不起作用 "tap"。我已经看过很多时间了，我指的是 jQuery 中的代码。 https://api.jquerymobile.com/tap/

代码如下：

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">

    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
<script>

    $("#dsa").bind("tap",qq);
    function qq(event){
        $(event.target).css("background-color","#F0F");
        }
    </script>
    <div data-role="page" data-title="Tableau測試" data-theme="b">
        <div data-role="header">
        <p>從下方選單選擇一個想看的東西</P>
        </div>
        <div data-role="content">
            <ol data-role="listview">
                <li><a href="20180615-0001.html" rel="external">20180615-0001</a></li>
                <li><a href="test.html" rel="external">test</a></li>
                <div><p id="dsa" style="background-color:#0F6">fnhdjiahgdifsaghui</p></div>
            </ol>
        </div>
        <div data-role="footer" id="foo">
        <p></P>
        </div>
    </div>
</body>

Answer 1

在您所说的 link 中，请注意您省略的 $(function(){...}); 符号。它会在文档准备好后执行您的功能。所以，在script中添加如下：

$(function(){
   $("#dsa").bind("tap",qq);

  function qq(event){
     $(event.target).css("background-color","#F0F");
  }

});

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">

    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body onload='init()'>

    <div data-role="page" data-title="Tableau測試" data-theme="b">
        <div data-role="header">
        <p>從下方選單選擇一個想看的東西</P>
        </div>
        <div data-role="content">
            <ol data-role="listview">
                <li><a href="20180615-0001.html" rel="external">20180615-0001</a></li>
                <li><a href="test.html" rel="external">test</a></li>
                <div><p id="dsa" style="background-color:#0F6">fnhdjiahgdifsaghui</p></div>
            </ol>
        </div>
        <div data-role="footer" id="foo">
        <p></P>
        </div>
    </div>
</body>

如何使用 JQuery 手机

How to use JQuery mobile

javascript

jquery

jquery-mobile