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确实有效，因为这是一个发布执行的技巧，直到浏览器完成当前操作。您可以在Why is setTimeout(fn, 0) sometimes useful?

找到有关此内容的更多信息

Answer 2

某人（我无法记住他的用户名）发布了解决方案，但是他被拒绝了，所以他删除了他的答案。但他的解决方案是正确的，所以这就是：

我需要做的就是在输入上使用click事件而不是标签

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

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

2 个答案: