5

只要用户单击标签，我就会使用 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>

这不是一个大问题，因为我可以使用 0 来完成这项工作，setTimeout但是以 0 的延迟编写它真的很难看。我想到了一个浏览器错误，但我用 Chrome 和 Firefox 进行了测试，我得到了相同的结果。

对正在发生的事情有任何想法吗？

4

2 回答 2

3

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

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

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

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

于 2013-05-03T13:33:40.593 回答
0

有人（我不记得他的用户名）发布了解决方案，但被否决了，所以他删除了他的答案。但他的解决方案是正确的，所以这里是：

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

$('input[type=checkbox]').click(function() {
        $(this).closest('form').submit()
})
于 2013-05-03T13:39:14.817 回答