为什么我的 jQuery 对话框在按下 enter 时会重新加载页面？答案

【问题标题】：Why does my jQuery dialog reload the page when enter is pressed?为什么我的 jQuery 对话框在按下 enter 时会重新加载页面？
【发布时间】：2013-03-18 22:46:48
【问题描述】：

我正在尝试使用 jQuery 对话框在我的页面中输入数据。由于我不明白的原因，当用户按下回车键时，整个页面都会刷新。它甚至不验证文本框中的内容。

I've create a jsfiddle 显示问题。我检查了the documentation here，我的代码似乎遵循了指导方针，但我一定遗漏了一些东西！

这是我如何调用对话框

$("#create-subtitle")
    .click(function () {
    $("#dialog-form-subtitles").dialog("open");
    return false;
});

这是我的对话之一：

$("#dialog-form-steptitles").dialog({
        autoOpen: false,
        height: 220,
        width: 450,
        modal: true,
        buttons: {
            "Ajouter un sous-titre pour les étapes": function () {
                var bValid = true;
                allFieldsStepTitle.removeClass("ui-state-error");
                bValid = bValid && checkLength(nameStepTitle, "sous-titre pour les étapes", 3, 50);

                if (bValid) {
                    var $parent = $("#StepTitles");
                    var numElem = $parent.find("tr").length;
                    $('#StepTitles > tbody:last').append('<tr><td><input class="text-box single-line" id="StepTitles_' + numElem + '__Name" name="StepTitles[' + numElem + '].Name" type="text" value="' + nameStepTitle.val() + '" /></td><td>&nbsp;<ul id="ListStep' + numElem + '"></ul></td><td><button id="create-step' + numElem + '" name="create-step' + numElem + '" class="btn btn-success">Ajouter une étape</button></td></tr>');
                    $(this).dialog("close");
                }
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            allFieldsStepTitle.val("").removeClass("ui-state-error");
        }
    });

有人可以帮我吗？

【问题讨论】：

在你的jsFiddle中，点击jsHint按钮，你会很快看到你的错误。
不太确定 jsHint 是如何工作的。你能给我更多信息或者在下面写一个完整的答案吗？ :)
单击 jsHint 按钮并在 JavaScript 窗格中查看代码的行号。将鼠标悬停在红点上...这些是您的 JavaScript 问题。
好的，我修好了。 jsfiddle.net/DarkJaff/m8Ps2 仍然做同样的事情:(
抱歉……值得一试。我唯一的其他建议是仔细比较小提琴中的每一段代码与演示页面上的代码。我注意到您有多种表格。将其剥离为 ONE，看看它是否有效，然后从那里重新构建它。

标签： jquery jquery-ui dialog

【解决方案1】：

在form 内点击enter > input 会导致表单提交，从而刷新页面。您可以做一些事情，但其中大部分涉及阻止表单上的默认提交操作。你的代码大部分是法语的，所以我很难浏览它，但为了逐步刷新，只需这样做：

$('form').on('submit', function(event){
    event.preventDefault();
});

从那里，您可能想用回车键做一些事情——触发点击按钮——同样，文本是法语的，所以我不知道它在说什么。

$('your-input').keypress(function(event) {
    if(event.which == 13) { // 13 is the 'Enter' key
     // do something here
   }
});

希望对您有所帮助。

【讨论】：

这并不能解释the documentation page 上的相同代码如何表现不同。
OP 想要在模式中点击“输入”——“相同”的代码文档页面并不完全适合那种体验。
他在哪里说他“想”按回车键？敲回车导致的表单提交是整个问题，这是我的理解。
"当用户按下回车时，整个页面被刷新。" OP说。看起来不受欢迎，Sparky。 OP 只有一个表单域；任何普通用户都会认为按回车键会按预期运行：关闭模式并将更改保存到 UI。无论如何，您可以详细说明您的答案。
@Sparky 是对的。如果你进入关于对话框的 jquery ui 页面上的示例，当你按下回车键时，什么也没有发生。为什么我的代码会刷新/提交页面并跳过所有验证？如果您用鼠标单击对话框内的“Ajouter une catégorie d'ingrédient”按钮，它不会提交任何内容，因为文本框的内容无效..

【解决方案2】：

在 jQuery 的文档页面中，该示例没有 form 标记，这就是按预期工作的原因。不使用here 形式检查您的代码。如果您需要该标签，请查看this SO question。

【讨论】：