jQuery submit方法在安卓上有效，但在iOS上无效
jQuery submit方法在安卓上有效，但在iOS上无效
提问于 2020-10-14 19:21:36
我在一个PWA中有一个小的表单，它提交的单选按钮被点击。它可以在Mac/Chrome (用于测试)和Android/Chrome上运行，但不能在iOS/Safari上运行。
表格是
<form name="changeavail" method="post">
<input type="radio" id="stat" name="availability" value="Station" <?php echo $statchkd ?> /> <label for="stat">To station</label><br><br>
<input type="radio" id="rv" name="availability" value="RV" <?php echo $rvchkd ?> /> <label for="rv">To RV</label><br><br>
<input type="radio" id="not" name="availability" value="Not available" <?php echo $notchkd ?> /> <label for="not">Not available</label><br>
<input type="hidden" name="MM_avail" value="changeavail" />
</form>而javascript是
$(document).ready( function() {
$("form[name=changeavail] input").on("change", function() {
alert("I hate iOS!");
$("form[name=changeavail").submit();
alert("I still hate iOS!");
});
});在Android上，我同时看到了提醒和表单提交。在iPhone或iPad上，我只看到第一个警报，没有发生其他任何事情。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-14 19:30:08
尝尝这个
const ua = navigator.userAgent,
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
$(function() {
$("#container").on(event, '[name=availability]', function(e) {
e.target.form.submit();
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="changeavail" method="post">
<div id="container">
<label><input type="radio" name="availability" value="Station" <?php echo $statchkd ?> /> To station</label><br><br>
<label><input type="radio" name="availability" value="RV" <?php echo $rvchkd ?> /> To RV</label><br><br>
<label><input type="radio" name="availability" value="Not available" <?php echo $notchkd ?> /> Not available</label><br>
</div>
<input type="hidden" name="MM_avail" value="changeavail" />
</form>
或者没有脚本(我假装是从php中检查的)
[type=submit] {
width: 130px;
font-size: 13px;
text-align: center;
line-height: $sw-height;
white-space: nowrap;
text-transform: uppercase;
opacity: 0.8;
justify-content: center;
align-items: center;
background-color: lightblue;
color: darkblue;
background-position: center;
border: 2px solid #C0C2BF !important;
padding: 0 10px;
margin-bottom: 10px;
}
[type=submit].checked {
font-weight: bold;
border: 2px solid black !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="changeavail" method="post">
<div id="container" class="bold_option_value">
<input type="submit" name="availability" value="Station" class="<?php echo $statchkd ?> checked" /><br/>
<input type="submit" name="availability" value="RV" class="<?php echo $rvchkd ?>" /><br/>
<input type="submit" name="availability" value="Not available" class="<?php echo $notchkd ?>" /><br/>
</div>
<input type="hidden" name="MM_avail" value="changeavail" />
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64352164
复制相关文章
相似问题
腾讯云开发者
