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 上进行测试……我担心的是，jQuery mobile 已被弃用，因为该click()活动效果很好。我已经包含了来自的来源http//jquerymobile.com，这也不起作用。

谢谢！

4

1 回答 1

2

我认为问题在于.item加载脚本时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 回答