safari 上的单选按钮标签点击时间

Question

我在表单上有这种情况：

<form id="boxselection" method="POST" action="select.php">
    <label class="labels" for="boxtype">
        <input type="radio" name="boxtype" value="3x80">
        <img src="...">
    </label>
    <label class="labels" for="boxtype">
        <input type="radio" name="boxtype" value="4x80">
        <img src="...">
    </label>
</form>
<script>
    $('.labels').on('click',function() {
        $('#boxselection').submit();
    });
</script>

在 Chrome、Firefox 和 IE 中一切正常，在 Safari 中 PHP 脚本不接收任何 POST 值。

一种可行的解决方法是以这种方式修改 javascript：

<script>
    $('.labels').on('click',function() {
        setTimeout( function() {
             $('#boxselection').submit();
        }, 1000);
    });
</script>

这正在工作，我的问题是......为什么？

Answer 1

首先，我认为您需要将id 值添加到您的单选按钮，以便标签与它们各自的单选按钮相关联。 for 属性与表单元素的 id 相关联。

<form id="boxselection" method="POST" action="select.php">
    <label class="labels" for="checkbox1">
        <input type="radio" name="boxtype" id="checkbox1" value="3x80">
        <img src="...">
    </label>
    <label class="labels" for="checkbox2">
        <input type="radio" name="boxtype" id="checkbox2" value="4x80">
        <img src="...">
    </label>
</form>

至于 jQuery on.()，它在 setTimeout 之后起作用的最可能原因是单选按钮在单击页面上的“标签”后实际上并没有立即更改，即使现在它是id 与单选按钮正确关联。

您希望将您的委托添加到单选按钮本身的change 事件中，当您单击标签按钮时，这也将起作用：

$('form#boxselection').delegate('change', 'input[type="radio"]', function(e) {

    $('#boxselection').submit();
});

上述代码将触发表单中任何单选按钮的更改事件的表单提交。