jQuery代码在移动设备上不起作用，但在浏览器中起作用 [英] Jquery code not working on mobile device but working in browser
问题描述
我有以下代码可以在桌面上的Safari和Chrome中使用，但不能在iphone或三星银河S4上使用...无法在我的手机上使用的代码是表单上的click函数-每次选择后，#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 © 2013. All rights reserved.</h4></div>
</div><!-- /page -->
</body>
</html>
由于您使用的是jQuery Mobile，请尝试使用vclick而不是click.
http://api.jquerymobile.com/vclick
vclick将同时适用于触摸事件和鼠标单击事件，而click仅处理实际的单击事件-在移动设备上可能是挑剔的(有时在点击时根本无法触发). /p>
更新:一些问题/反馈:
-
为什么在表单上有单击事件?
$('#choosefriendsform').click(function() {在我看来，这不正确...单击事件应该在按钮或可单击元素上.这可能是您问题的根源.如果您要在表单上进行事件委派，则需要使用"on"或"delegate"
即这应该只针对人名列表项:
$('#choosefriendsform').on('vclick', '.ui-listview .ui-li', function(){ -
设置一个演示问题的JS小提琴.我已经为您开始了.您可以编辑它直到显示出您遇到的问题? ( http://jsfiddle.net/n3bFL/1/)
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 © 2013. All rights reserved.</h4></div>
</div><!-- /page -->
</body>
</html>
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/ )
这篇关于jQuery代码在移动设备上不起作用，但在浏览器中起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
