4

私は自分のプロジェクトで非常に単純な関数をテストするために一日中試みています。レシピは

  1. ユーザーがリスト項目をタップしたままにします
  2. アンalert()が現れる。

私のマークアップは

...
<body>
   <ul>
      <li class="item ...">Hello, I'm an item</li>
      ...
   </ul>
</body>
<script src="jquery.js"></script>
<script src="jquery.mobile.js"></script>
...

私のスクリプトは

$('.item').on("taphold", function() {
   alert("hello");
});

私は Safari を使用して iPad 2 でテストしています...私の心配は、click()イベントがうまく機能するため、jQuery モバイルが非推奨になっていることです。からのソースを含めましたがhttp//jquerymobile.com、これも機能しませんでした。

ありがとうございました！

4

1 に答える 1

2

.item問題は、スクリプトがロードされた時点で classを持つ要素が DOM に存在しないことだと思います。スクリプトをページの最後に配置するか、document要素にイベント ハンドラーをアタッチします。$(document).on('taphold', 'li.item', function(){

以下の作業例を作成しました。

<!DOCTYPE html>
<html lang="en">
     <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Taphold event demo</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/jquery-1.10.0.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head>
    <body>
        <div id="tap-page" data-role="page">
            <div data-role="header">
                 <h1>Long-press (taphold) a list item</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview">
                  <li class="item">Hello, I'm an item</li>
                  <li class="item">Hello, I'm another item</li>
               </ul>
            </div> 
        </div>
        <script>
            $(function(){
                $('li.item').bind( 'taphold', tapholdHandler );

                function tapholdHandler( event ){
                  alert('Hello');
                }
            });
        </script>
    </body>
</html>

要素にイベント ハンドラーをアタッチする例document:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Taphold event demo</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/jquery-1.10.0.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script>
            $(document).on( 'taphold', 'li.item', tapholdHandler );

            function tapholdHandler( event ){
              alert('Hello');
            }       
        </script>
    </head>
    <body>
        <div id="tap-page" data-role="page">
            <div data-role="header">
                 <h1>Long-press (taphold) a list item</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview">
                  <li class="item">Hello, I'm an item</li>
                  <li class="item">Hello, I'm another item</li>
               </ul>
            </div> 
        </div>
    </body>
</html>
于 2013-06-22T15:27:10.557 に答える