Javascript 使用JS提交表单时未设置Post变量

我有一个表单，只要用户单击标签，我就用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>

值1
价值2

剧本：

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

$（'label'）。单击（函数（）{
var form=$（this）.closest（'form'）
//如果我使用下一行，则不会设置值
表格提交（
//如果我使用'setTimeout'，它可以工作，即使延迟为0
setTimeout（函数（）{
表格提交（
}, 0)
})

这不是一个大问题，因为我可以使用

setTimeout

来实现这一点，但是以0的延迟编写这一点真的很难看。我考虑过一个浏览器错误，但我用Chrome和Firefox进行了测试，得到了相同的结果

---

知道发生了什么吗？

这是因为您正在收听标签单击。尝试侦听复选框单击

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

单击标签意味着浏览器将“单击”相关元素。而且，由于您是在标签单击时提交表单的，因此不会给浏览器这样做的机会

使用0设置超时之所以有效，是因为这是一种在浏览器完成其当前操作之前发布执行的技巧。你可以在

上找到更多信息。有人（我不记得他的用户名）发布了解决方案，但被否决了，所以他删除了答案。但他的解决方案是正确的，因此：

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

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

---

是否在DOM ready上运行此操作？我假设在值实际更改之前触发了

单击
事件。@DavidFregoli是的，很抱歉我忘记了包含该事件。请尝试使用本机提交方法
表单[0]。提交（）
。您设置了两次
操作
属性，第二次设置不正确。您应该使用
POST
设置
方法
属性。是的，我删除了我的答案，直到我添加了一个解释很难相信这个更改解决了问题，你不是更可能把它放在domready处理程序中吗？谢谢你的答案和链接！