Question

我有以下代码在我的桌面上使用safari和chrome但是我的iphone或samsung galaxy S4没有工作...我的手机上无法使用的代码是表单上的点击功能 - 每个选择#maxfriends应该更新，当用户选择45,49,50或＆gt;一个弹出窗口的50个朋友应该显示警告他们已接近极限。这一切都完美适用于safari和我的imac上的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>

Answer 1

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

http://api.jquerymobile.com/vclick

vclick适用于触摸事件和鼠标点击事件，而click仅处理实际点击事件 - 在移动设备上可能很挑剔（有时在点击时根本不会触发）的东西）。

更新：一些问题/反馈：

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

如果您尝试在表单上进行事件委派，那么您需要使用＆＃39; on＆＃39;或者＆＃39;委托＆＃39;

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

$('#choosefriendsform').on('vclick', '.ui-listview .ui-li', function(){
设置一个JS小提琴来演示这个问题。我为你开了一个。你可以编辑它，直到它显示你遇到的问题吗？（http://jsfiddle.net/n3bFL/1/）

Answer 2

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

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

而不是：

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

我用过：

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

现在可以使用了

Jquery代码不能在移动设备上运行，但在浏览器中工作

2 个答案: