Question

我有一个表格，我可以在其中附加数据，一旦表单中有数据，我点击提交分数，这会将数据附加到表格中。在附加数据之后，我点击更新排行榜按钮，它有一个附加到它的排序功能，它对表分数进行排序。我的问题是更新排行榜按钮在我的设备上不起作用，但在chrome上完美运行。任何人有同样的问题或有任何解决方案吗？。

从我读到的内容可能是将点击事件更改为vclick，但我不确定如何实现这一点。

码

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

Answer 1

你也可以尝试使用tap-event：

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

以下是有关jQuery Mobile touch events

的更多信息

Answer 2

首先请**请勿在移动设备中使用document ready。特别是使用JQM时

你可以这样做

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

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

然后您需要在pageinit或pageshow个事件

中添加所有代码

喜欢这个

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

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

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

});

注意 pageinit几乎等同于document.ready请查看api文档。 Link for some reading

希望我能帮到你:)。

onclick功能无法在移动设备上运行：jquery

2 个答案: