Question

我用一个按钮打开我的对话框然后我将光标放在一个输入字段中并按下进入我的对话框关闭并将此行插入地址栏：

jQuery的：

$('#dialog').load("form-incident.php").dialog({
    title: "Add Incident",
    autoOpen: false,
    resizable: false,
    width: 800,
    modal:true,
    position: ['center', 'top+50'],
    buttons: {
        Add: function(){
             $.ajax({
                url     : 'save.php',
                type    : 'POST',
                data    : $('form').serialize(),
                context: $(this),
                success: function (result) {
                    if (result === "true") {
                        alert('Incident has been added successfully');
                    } else {
                        alert('ERROR: Cannot insert data to MySQL table');
                    }
                    window.location.reload();
                    $(this).dialog( "close" );
                },
                error   : function(){
                    alert('ERROR: Check database connection');
                }
            });
        },
        Cancel: function() {
            $(this).dialog( "close" );
        }
    }
});

形状incident.php：

<form>
    Name: <input type="text" name="name" id="name"><br><br>
    Project:
    <select name="project" id="project">
        <option value="test">Test</option>
    </select><br><br>
    Incident:<br> <textarea name="incident" id="incident" style="resize:none; width: 100%;" rows="14" cols="94"></textarea>
</form>

如何解决问题，以便对话框不会关闭，但如果之前有填写表单的某些建议，仍然会做出反应？

Answer 1

好的，我忘了如果表单中只有一个输入元素，即使没有提交按钮，也会发生隐式提交。

因此，看起来问题是从提交的表单中发生的。但在这种情况下，在提交上调用preventDefault()甚至会修复它。

我把你的代码片段从上面扔了一个小提琴，并且能够重现这个问题。一旦我放入preventDefault()，它就不再发生了。请查看它，看看它与您的实时代码有何不同。

https://jsfiddle.net/elezar/u0sfx22p/2/

在输入字段中输入jQuery UI对话框关闭

1 个答案: