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

I'm trying to use jQuery dialog to enter data in my page. For a reason I don't understand, when the user press enter, the entire page is refreshed. It doesn't even validate what is in the textbox.

我正在尝试使用jQuery对话框在我的页面中输入数据。出于某种原因，我不理解，当用户按enter时，整个页面都会刷新。它甚至不验证文本框中的内容。

I've create a jsfiddle that show the issue. I checked the documentation here and my code seems to follow the guidelines but I must be missing something!

我创建了一个jsfiddle来显示这个问题。我在这里检查了文档，我的代码似乎遵循了指导方针，但是我肯定漏掉了什么!

Here is how I call the dialog

下面是我如何调用这个对话框

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

Here is one of my dialog:

这是我的一个对话:

$("#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");
        }
    });

Anyone can help me with this?

有人能帮我吗?

2 个解决方案

#1

In jQuery's documentation page the example does not have a form tag, this is why is working as expected. Check your code without the form here. In case you need the tag to be there, check this SO question.

在jQuery的文档页面中，示例没有表单标记，这就是为什么按预期工作。检查您的代码，这里没有表格。如果你需要标签在那里，检查这个SO问题。

#2

Hitting enter while inside the form > input causes the form to submit, thus refreshing the page. There are a few things you can do, but most of them involve preventing the default submit action on the form. Your code is mostly in French, so I had hard time navigating it, but in order to step the refresh, simply do this:

在表单>输入中单击enter将导致表单提交，从而刷新页面。您可以做一些事情，但大多数都涉及到防止表单上的默认提交操作。你的代码大部分是用法语写的，所以我很难在它上面导航，但是为了让刷新更简单，只需这样做:

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

From there, you'll likely want to do something with the enter key — trigger a click on the button—again, the text is in French, so I don't know what it says.

从那里，你可能想要做一些与输入键-触发点击按钮-再次，文本是在法语，所以我不知道它说什么。

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

Hope that helps.

希望有帮助。

#1