CODEWITHSUNDEEP
jqueryjquery-mobile
user2063950
user2063950

Reputation:

jQuery Mobile Taphold

I'm trying the whole day to test a dead simple function in my project. The recipe is

  1. The user taps and hold a list item
  2. An alert() shows up.

My Markup is

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

My Script is

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

I'm testing on an iPad 2 with Safari... My worry is, that jQuery mobile is deprecated, because the click() event works great. I've included the source from http//jquerymobile.com, this also didn't work.

Thank you!

Upvotes: 4

Views: 7625

Answers (1)

Apostolos Emmanouilidis
Apostolos Emmanouilidis

Reputation: 7197

I think that the problem is that the elements with .item class do not exist in DOM at the time your script is loaded. Put the script at the end of your page or attach the event handler on the document element using $(document).on('taphold', 'li.item', function(){

I've created the below working examples.

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

and an example which attaches an event handler on the document element:

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

Upvotes: 2

Related Questions