Jquery Form.submit()在Chrome中可以正常工作，但在Firefox中无法工作

Question

我有以下函数，它从页面收集数据，将它们全部放入"data"变量中，然后将其附加到表单并提交。

 $(document).ready(function () {
$('#content-tab .submit').click(function () {
    var data = {champion: window.selectedChampion, runes: runes, masteries: masteries, items: items, skillingOrders: skillingOrders, chapters: chapters, title: $('#guide_title').val()};
            data = JSON.stringify(data); 
            $("<form method='post'>").append($('<input type="hidden" name="data" id="data">').val(data)).submit();
    });
});

页面上有一个div，当它被点击时会触发这个事件：

<div class='button pointer submit'>Submit</div>

在Chrome中测试时一切都很好。表单提交后会重定向到页面，就像计划的一样。但是在 Firefox（版本 5 和 6）中测试时，点击 div 没有任何反应。什么也没有发生。我想知道 Firefox 出了什么问题？非常感谢任何帮助。谢谢。

- druesome

---

在Firefox中，“＃content-tab .submit”选择器是否选择任何内容？使用“alert（$（'＃content-tab .submit'）.size（））;”进行检查。 - russau

@russau 它返回一个“1”，所以是的，它确实返回。 - druesome

Answer 1

在提交前，我建议将表单添加到DOM中。

$('#content-tab .submit').click(function() {

    var data = {
        champion: window.selectedChampion,
        runes: runes,
        masteries: masteries,
        items: items,
        skillingOrders: skillingOrders,
        chapters: chapters,
        title: $('#guide_title').val()
    };
    data = JSON.stringify(data);
    var $form = $("<form method='post'>").append($('<input type="hidden" name="data" id="data">').val(data));
    $form.appendTo("body").submit();

});

- karim79

---

嗨karim79，抱歉在我的示例代码中漏掉了那一部分。上面的函数已经包含在$(document).ready(function() { xxx });中了。 - druesome

啊，那个 .appendTo() 对我很有帮助。我使用了 .clone() 来复制一个表单，并将其中一些字段放入规范形式，而不向用户显示，但是在我将其添加到 DOM 中（当然是用 display: none）之前，FireFox 无法正确提交。 - jacobq

@karim79 我刚遇到了这个问题。似乎在Chrome中创建一个表单元素并不将其添加到dom中，然后使用.submit()是可以工作的，但在IE或Firefox中不行——你需要将其添加到dom中。这是有什么原因呢？还是只是Chrome的一个古怪问题？ - Gary Green