onclick function not working on mobile device : jquery

Question

I have a table where I can append data to it, once the forms have data in, I click submit scores, this appends the data to the table. After appending the data, I click the update leader board button, this has a sort function attached to it which sorts the table scores. My problem is that the update leaderboard button does not work on my device but works perfectly on chrome. Anyone had the same problem or has any solutions to this?.

From what I read it may be down to changing the click event to a vclick, but I am unsure how to implement this.

code

    <!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>

           <meta name="viewport" content="width=device-width"/>
 <link rel="stylesheet" href="themes/theme1.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta charset="utf-8">



    <link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />


    <script src="jqm/demos/js/jquery.js">
    </script>



    <script src="jqm/demos/js/jquery.mobile-1.3.2.min.js"> </script>
        <script type="text/javascript" src="__jquery.tablesorter/jquery.tablesorter.js"></script> 
    </script>


        <script>




            $(document).ready(function () {
                //selector functions for buttons and tablesorter plugin
                $('#btn1').on('click', AddScore);

                $("#myTable").tablesorter();

                 $('#trigger-link').click(TriggerFunction);


            });

        function TriggerFunction() {
     var sorting = [[3, 1]];
     $("table").trigger("sorton", [sorting]);
     return false;
 }

            function myAlert()
{
alert("Scores added!, now hit the 'Update leaderbord' button");
}

            function myAlert2()
{
alert("Leaderboard updated!");

}




            function AddScore() {
                //Function to add scores to table
                var jqTableBody = $('#myTable tbody');
                var sTRTemplate = '<tr>' +

                                              '    <td>{Id}</td>' +
                                              '    <td>{Course}</td>' +
                                              '    <td>{Target}</td>' +
                                              '    <td>{Points}</td>' +
                                              '</tr>';

                var sTRAppend = sTRTemplate;

                $('div[data-role="fieldcontain"] input:text').each(function () {
                    switch (this.id) {

                        case 'ScoreID': sTRAppend = sTRAppend.replace('{Id}', this.value); break;
                        case 'ScoreCourse': sTRAppend = sTRAppend.replace('{Course}', this.value); break;
                        case 'ScoreTarget': sTRAppend = sTRAppend.replace('{Target}', this.value); break;
                        case 'ScorePoints': sTRAppend = sTRAppend.replace('{Points}', this.value); break;
                    }
                })
                jqTableBody.append(sTRAppend); //Append new data to table
                $("#myTable").trigger('update');
            }



        </script>
    </head>
    <body>

    <div data-role="collapsible" data-theme="b" data-collapsed="true">
         <h1>Current Top</h1>
<div data-role="fieldcontain">
    <label for="ScoreID">Student ID:</label>
    <input type="text" name="ScoreID" id="ScoreID" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScoreCourse">Course:</label>
    <input type="text" name="ScoreCourse" id="ScoreCourse" value=""  />
</div>  

<div data-role="fieldcontain">
    <label for="ScoreTarget">Target (pts):</label>
    <input type="text" name="ScoreTarget" id="ScoreTarget" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScorePoints">Score (pts):</label>
    <input type="text" name="ScorePoints" id="ScorePoints" value=""  />
</div>  


<fieldset class="ui-grid-a">
    <div class="ui-block-a"><button id="btn1" data-theme="b" onclick="myAlert();">Submit scores</button></div>
    <div class="ui-block-b"><button id="trigger-link" data-theme="b" onclick="myAlert2();">Update leaderboard</button></div>

</fieldset>





    <table data-role="table" id="myTable" class="tablesorter" data-mode="" border="1">
      <thead>
        <tr>

       <th>ID</th>
          <th>Course</th>
          <th>Target</th>
          <th>Score (pts)</th>
      </thead>

      <tbody>
        <tr>

          <td>1</td>
          <td>netball</td>
          <td>101</td>
          <td>229</td>
        </tr>
        <tr>

          <td>2</td>
          <td>tennis</td>
          <td>200</td>
          <td>201</td>
        </tr>
        <tr>

          <td>3</td>
          <td>cricket</td>
          <td>91</td>
          <td>194</td>
        </tr>
        <tr>

          <td>4</td>
          <td>football</td>
          <td>200</td>
          <td>194</td>
        </tr>
        <tr>


        </tr>
      </tbody>
    </table>
      </tbody>
    </table>

  </div>



</body>
</html>

score 3 · Answer 1 · answered Mar 11 '14 at 10:04

3

you could also try using tap-event:

$('#btn1').on('tap', AddScore);
$('#trigger-link').on('tap', TriggerFunction);

And here is more information on jQuery Mobile touch events

answered Mar 11 '14 at 10:04

Verkion

630
8
25

score 0 · Answer 2 · answered Jun 24 '14 at 12:42

First of all please **DO not ** use document ready in mobile device . Especially when using JQM

you can do it this way

$(document).on('vclick','#mapSubmit', function(){

console.log("I am clicked");
};

And then you need to add all the code inside pageinit or pageshow events

Like this

$(document).on('pageinit','#wizard',function(){

 $(document).on('vclick','#mapSubmit', function(){

    console.log("I am clicked");
    }; 

});

Note The pageinit is almost equivalent to document.ready please have a look in the api documentation . Link for some reading

Hope I could help you :)

onclick function not working on mobile device : jquery

2 Answers2