单选按钮标签在safari上点击计时 - Radio button label click timing on safari

Radio button label click timing on safari

本文关键字：标签 safari 单选按钮 | 更新日期: 2023-09-27

我有一个表单:

<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>

这是现在工作，我的问题是…为什么?

首先，我认为您需要将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();
});

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