使用jQuery Mobile,onclick不会在Android上使用PhoneGap触发

时间:2013-01-03 19:10:05

标签: javascript jquery cordova jquery-mobile jquery-validate

我正在使用带有多重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打包后不能。

0 个答案:

没有答案