jQuery Mobile Taphold

2023年10月28日 211次阅读

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

>用户点击并按住列表项
>出现警报().

我的标记是

...
<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中包含了源代码,这也没有用.

谢谢！

最佳答案 我认为问题是在加载脚本时DOM中不存在带有.item类的元素.将脚本放在页面的末尾,或使用$(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>

以及在文档元素上附加事件处理程序的示例：

<!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>
点赞