Question

我正在尝试使用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");
        }
    });

任何人都可以帮我这个吗？

Answer 1

在enter＆gt;内部点击form 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
   }
});

希望有所帮助。

Answer 2

在jQuery的文档页面中，该示例没有form标记，这就是为什么按预期工作的原因。检查代码时没有here格式。如果您需要标记，请检查this SO问题。

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

2 个答案: