不能在一个页面加载中两次提交相同的表单(通过jQuery和AJAX)

Question

我正在为我的服务器管理应用程序编写一个模拟终端网页。基本上，使用jquery、ajax和php的shell_exec()，我正在模拟一个终端。

终端的输入行基本上只是一个包装在表单中的input元素。有一个jquery处理程序，当表单被提交(按下enter键)时触发ajax请求。

当我第一次提交时(当我发送第一个命令时)，一切都工作了。但是，当我尝试发送第二个表单时，页面会一直滚动到顶部，并且表单没有提交。

这是jquery:

$("#terminal-form").unbind('submit').submit(function() {
            var current_dir = $("#path").text();
            var command = $("#terminal-input").val();
            $.ajax({
                url: "terminal.php",
                type: "post",
                data: { current_dir: current_dir, command: command },
                dataType: 'json',
                success: function(data) {
                    $("#terminal table").remove();
                    $("#terminal").append("root@gallactica:" + current_dir + " $ " + command + "<br>");
                    if (data['output'] != '') {
                        $("#terminal").append(data['output'] + "<br>");
                    }
                    $("#terminal").append("<table class='terminal-content'><tr><td nowrap='nowrap' style='overflow:auto;whitespace:nowrap'>root@gallactica:" + data['wd'] + "$<td style='width:99%'><form style='margin:0px;padding:0px' id='terminal-form'><input id='terminal-input' type='text'></input></form></td></tr></table>");
                    $("#terminal-input").focus();
                }
            })
            return false;
        })

success处理程序基本上只是删除旧的表单，并以明文形式插入结果，本质上给人一种它都是交互式的错觉。

下面是PHP后端:

<?php
$current_dir = $_POST['current_dir']; // get current directory
$command = $_POST['command']; // get the command to run
chdir($current_dir); // change into the right directory
if (substr($command, 0, 2) == "cd") {
    chdir(substr($command, 3));
    $output = "";
} else {
    $output = shell_exec($command); // get the command's output
}
$wd = shell_exec('pwd'); // get the current working directory
$result = array('wd' => $wd, 'output' => $output); // create array
$result = json_encode($result); // convert to json for jquery
echo $result;

问题是当我去提交第二个命令时。我甚至认为表格都没有正确提交。我做了一些谷歌搜索，发现你需要解除绑定的处理程序，我正在做的，但它仍然不工作。

Answer 1

一旦你替换了一个元素，你就失去了它的事件处理程序，即使你替换了完全相同的html。你看到的是表单是通过默认方式提交的这会导致页面重载

为了解决这个问题，你可以委托提交处理程序，这样它就可以在以后加载的表单中工作

$(document).on('submit', "#terminal-form",function() {
   /* handler code*/
})

这将绑定处理程序到始终存在的document，并且将仅针对您的特定表单的ID。不会干扰页面