jQuery submit 方法适用于 Android 但不适用于 iOS

Question

我在 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 上，我只看到第一个警报，没有其他任何反应。

Answer 1

试试这个

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>