javascript - jQuery Mobile を使用すると、onclick が Android の PhoneGap でトリガーされない

Question

マルチページのjqueryモバイルアプリでjquery.validate.jsを使用しています。次のページに移動する前に、 onclick= を使用して各ページ/フォームを検証しています。これは、ブラウザでアクセスすると、iOS と Android で正しく機能します。しかし、PhoneGap でパッケージ化すると、フッターの次のボタンが機能しなくなり、何もしなくなります。onclickに問題があると思います。ここでいくつかのソリューションフォームを試しました: PhoneGap build + jquerymobile: onclick on button does not workとここ: https://forum.jquery.com/topic/jquery-mobile-on-phone-gap-for-android成功しません。私のhtmlの関連サンプルを以下に示します。

これらのリンクを Android/PhoneGap で機能させるにはどうすればよいですか? ボタンではなく、href として保持したいと思います。

ありがとう！

<div id="info" data-role="page" data-theme="c">
<div data-role="content">

<script>
    function infoval(){ 
        if (!$("#infofm").valid()) {
            alert("Please fill in all fields on this page before proceding");
        } else {
            $.mobile.changePage('#towertop', {transition: 'slidefade'});
        }
    };
    function towertopval(){ 
        if (!$("#towertopfm").valid()) {
            alert("Please select 'Yes' 'No' or 'N/A' for each item before proceding");
        } else {
            $.mobile.changePage('#towerground', {transition: 'slidefade'});
        }
    };
</script>

<form id="infofm" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your First & Last Name" class="required" name="_fid_14" id="_fid_14" />
</form>
<div data-role="footer" data-id="myfoot" data-position="fixed"><div data-role="navbar">
<ul><li></li>
<li><a href="#start" data-iconpos="bottom" data-theme="e" data-transition="pop" data-icon="back" data-rel="dialog">Start Over</a></li>
<li><a href="" data-iconpos="bottom" data-theme="a" data-icon="arrow-r" onclick="infoval();">Next Step</a></li></ul></div></div>
</div></div>

<div id="towertop" data-role="page" data-theme="c">
<div data-role="content">
<form id="towertopfm" encoding="multipart/form-data" encType="multipart/form-data">
<div data-role="fieldcontain"><p><a href="" data-reveal-id="16pop" data-animation="none">Azimuth Verification</a></p><fieldset data-role="controlgroup" data-type="horizontal"><input id="_fid_16_a" type="radio" name="_fid_16" value="Yes" class="required"/><label for="_fid_16_a">Yes</label><input id="_fid_16_b" type="radio" name="_fid_16" value="No"/><label for="_fid_16_b">No</label><input id="_fid_16_c" type="radio" name="_fid_16" value="N/A"/><label for="_fid_16_c">N/A</label></fieldset>
<p><textarea placeholder="Comments" name="_fid_17" id="_fid_17" rows="6" /></textarea></p></div>
</form>
<div data-role="footer" data-id="myfoot" data-position="fixed"><div data-role="navbar">
<ul><li><a href="#info" data-iconpos="bottom" data-theme="a" data-transition="slidefade" data-direction="reverse" data-icon="arrow-l">Previous Step</a></li>
<li><a href="#start" data-iconpos="bottom" data-theme="e" data-transition="pop" data-icon="back" data-rel="dialog">Start Over</a></li>
<li><a href="" data-iconpos="bottom" data-theme="a" data-icon="arrow-r" onclick="towertopval();">Next Step</a></li></ul></div></div>
</div></div>

<script>
$(document).ready( function(){
    $("#infofm").validate({ errorPlacement: function(error, element) {} });
    $("#towertopfm").validate({ errorPlacement: function(error, element) {} });
    $("#towergroundfm").validate({ errorPlacement: function(error, element) {} });
    $("#cabaavfm").validate({ errorPlacement: function(error, element) {} });
    $("#sigemailfm").validate({ errorPlacement: function(error, element) {} });
});
</script>

これは、ヘッダー内のスクリプトの順序です。

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<script type="text/javascript" src="sisyphus.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<script src="jSignature.js"></script>
<script type="text/javascript" src="date.format.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script src="phonegap.js"></script>

更新:私もこれを試しました:

<script>
    $(function(){
        $('#nxt1').click(function(){
            infoval();
        });
        $('#nxt2').click(function(){
            towertopval();
        });
    });
</script>

これとともに：

<div data-role="footer" data-id="myfoot" data-position="fixed"><div data-role="navbar">
<ul><li></li>
<li><a href="#start" data-iconpos="bottom" data-theme="e" data-transition="pop" data-icon="back" data-rel="dialog">Start Over</a></li>
<li><a href="" id="nxt1" data-iconpos="bottom" data-theme="a" data-icon="arrow-r">Next Step</a></li></ul></div>

同じ結果 - ブラウザで動作しますが、PhoneGap でパッケージ化した後では動作しません。