Question

我正在尝试整天在我的项目中测试一个死的简单函数。食谱是

用户点按并按住列表项
显示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 ...我担心，jQuery mobile已被弃用，因为click()事件效果很好。我已经从http//jquerymobile.com中添加了来源，这也没有用。

谢谢！

Answer 1

我认为问题是在加载脚本时DOM中不存在.item类的元素。将脚本放在页面的末尾，或使用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>

jQuery Mobile Taphold

1 个答案: