1

我有以下代码在我的桌面上的 safari 和 chrome 中工作，但在我的 iphone 或三星 Galaxy S4 上不工作......在我的手机上不工作的代码是表单上的点击功能 - 每次选择#maxfriends 应该更新，当用户选择了 45、49、50 或 > 50 个朋友时，应显示一个弹出窗口，警告他们即将接近限制。这一切都在我的 imac 上的 safari 和 chrome 中完美运行，只是无法弄清楚为什么它不能在移动设备上运行。我正在使用 jquery mobile 1.3.1 和 jquery 1.9.1。 

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /><link rel="stylesheet" href="csscustom.css" /><link rel="stylesheet" href="csstable.css" /><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

</head> 
<body> 

<div data-role="page" id="selectfriends" >

    <div data-role="header" data-theme="b" id="header" >
    <a href="#mypanel" class="mypanel" data-icon="bars" data-iconpos="notext">Navigation</a>
        <h1>Favourite Friends</h1>
    </div><!-- /header -->

    <div data-role="content">

    <p> Please select up to a maximum of 50 friends. <span id="maxfriends"> </span> / 50 selected so far.</p>

    <a id="popupLink" href="#popupInfo" data-rel="popup" data-role="button" class="ui-icon-alt" ></a>

    <div data-role="popup" id="popupInfo" class="ui-content" data-theme="e" style="max-width:100px;">
    <p></p>
    </div>

    <form id="choosefriendsform" action="quizwithfriendssavefavourites.php" method="POST">

        <div data-role="collapsible-set" data-inset="false">


    <div data-role="collapsible" data-theme="c"><h3>A</h3><ul data-role="listview" data-inset="false"><li data-role="fieldcontain"><label><input id="Aaron" type="checkbox" name="Form[uids][]" value="1234" checked="checked" /> Aaron </label> </li>

        </ul>   
        </div>
            </div>


            <ul data-role="listview" data-inset="false">
            <li>  <input type="submit" data-inline="true" data-theme="b" data-icon="check" value="Save As Favourites" > </li> 
            </ul>

        </form>


<script>
$( "#selectfriends" ).on( "pageinit", function() {

    $('h3').click(function() {
        var $position = $(this).offset();
        scrollTo(0,$position.top);

    });

    $('#popupLink').hide();

    var count = $("input:checked").length;
    $('#maxfriends').html(count);


    $('#choosefriendsform').click(function() {

        var count = $("input:checked").length;
        $('#maxfriends').html(count);   
        console.log(count);

        if (count == 45) {
            $('#popupInfo').html('<p>45/50 Selected</p>');
            $('#popupLink').trigger('click');
        }

        if (count == 49) {
            $('#popupInfo').html('<p>49/50 Selected</p>');
            $('#popupLink').trigger('click');
        }

        if (count == 50) {
            $('#popupInfo').html('<p>50/50 Selected. Please Save.</p>');
            $('#popupLink').trigger('click');       
        }

        if (count > 50) {
            $('#popupInfo').html('<p> >50 Selected. Please deselect some.</p>');
            $('#popupLink').trigger('click');   
        }
    });

    $('form').submit(function() {
        var count = $("input:checked").length;
        console.log(count);
        if (count>50) {
            return false;
        }
    });

 });
</script>   
        </div><!-- /content -->

        <div data-role="footer" data-theme="b" data-position="fixed" ><h4>Copyright &copy; 2013. All rights reserved.</h4></div>    
    </div><!-- /page -->

    </body>
    </html>
4

2 回答 2

1

由于您使用的是 jQuery Mobile，请尝试使用vclick而不是click.

http://api.jquerymobile.com/vclick

vclick将同时处理触摸事件和鼠标点击事件，而click只处理实际的点击事件——这在移动设备上可能很挑剔（有时在点击事物时根本不会触发）。

更新：一些问题/反馈：

  • 为什么表单上有点击事件？$('#choosefriendsform').click(function() { 这对我来说看起来不对...点击事件应该在按钮或可点击元素上。这可能是您问题的根源。

    如果您尝试在表单上进行事件委托，那么您需要使用“on”或“delegate”

    即这应该只针对人名列表项：

    $('#choosefriendsform').on('vclick', '.ui-listview .ui-li', function(){

  • 设置一个演示问题的 JS fiddle。我已经为你开始了一个。你可以编辑它直到它显示你遇到的问题吗？( http://jsfiddle.net/n3bFL/1/ )

于 2013-06-24T22:12:25.720 回答
-2

您可以尝试更改脚本声明顺序。编辑：它对我有用。

此外 - 当我以不同的方式/使用 angularjs/ 声明内容时，例如：

代替：

function dateToday(){
var dateT = new Date();
$("#todayDate").append(dateT.toDateString());}

我用过：

var dateT = new Date();
$scope.todayDate= dateT.toDateString();

现在可以了

于 2013-08-05T13:44:23.460 回答