使用JS提交表单时未设置发布变量

Question

一旦用户点击标签,我就会使用javascript提交表单.有一种奇怪的行为,数据不会被发布.但如果我提交表格有延迟(即使延迟为0),它也可以.

这是html:

<form action="/other-page" method="post">
    <input id="val-1" type="checkbox" name="filter[]" value="1">
    <label for="val-1">Value 1</label>

    <input id="val-2" type="checkbox" name="filter[]" value="2">
    <label for="val-2">Value 2</label>
</form>

剧本:

<script>
    $('label').click(function() {
        var form = $(this).closest('form')

        // if I use the following line the values won't be set
        form.submit()

        // If I use a `setTimeout` it works, even with a delay of 0
        setTimeout(function() {
             form.submit()
        }, 0)
    })
</script>

这不是一个大问题,因为我可以使用它,setTimeout但写入延迟0是非常难看的.我考虑过浏览器错误,但我使用Chrome和Firefox进行了测试,结果相同.

关于发生了什么的任何想法？

Answer 1

这是因为您正在聆听标签点击声。尝试监听复选框点击。

$('input[type=checkbox]').click(function() {
    $(this).closest('form').submit();
});

单击标签意味着浏览器将“单击”关联的元素。由于您在单击标签时提交表单，因此浏览器不会有机会执行此操作。

为什么 setTimeout 为 0 确实有效，是因为这是一个将执行发布到浏览器完成当前操作的技巧。您可以在为什么 setTimeout(fn, 0) 有时有用？