Jquery code not working on mobile device but working in browser

问题

I have the following code that is working in safari and chrome on my desktop but is not working on my iphone or samsung galaxy S4... the code that isn't working on my mobiles is the click function on the form - with each selection #maxfriends should update and when the user has chosen 45, 49, 50 or > 50 friends a pop up should display warning them that they are getting close to the limit. This all works perfectly in safari and chrome on my imac just can't figure out why it is not working on the mobile. I'm using jquery mobile 1.3.1 and 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>

回答1:

Since you're using jQuery Mobile, try using vclick rather than click.

http://api.jquerymobile.com/vclick

vclick will work with both touch events and mouse click events, whereas click only deals with actual click events - which can be finicky on a mobile device (and sometimes not fire at all when tapping on things).

UPDATE: some questions/feedback:

why do you have a click event on a form? $('#choosefriendsform').click(function() { That doesn't look right to me... Click events should be on buttons, or clickable elements. This could be the source of your issue.

If you're trying to do event delegation on the form, then you need to use 'on' or 'delegate'

I.e. this should target just the list items of peoples names:

$('#choosefriendsform').on('vclick', '.ui-listview .ui-li', function(){
Set up a JS fiddle which demonstrates the problem. I've started one for you. Can you edit it until it shows the issue you're having? ( http://jsfiddle.net/n3bFL/1/ )

回答2:

You can try changing scripts declaration order. EDIT: It worked for me.

Besides - when I declared stuff in different manner /using angularjs/, like:

instead of:

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

I've used:

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

and it works now

来源：https://stackoverflow.com/questions/17284931/jquery-code-not-working-on-mobile-device-but-working-in-browser

标签

jquery

jquery-mobile

mobile