javascript - 为什么第二个表单提交后就消失了？

Question

有一段代码包含两种形式:

<form class="emp-delete">
    <label for="emp-id">Id:</label>
    <input type="text" id="emp-id" />
    <input type="submit" id="submit" value="delete" />
    <span id="status" />
</form>
<script type="text/javascript">
    $("#submit").click(function(){
            $.ajax({
            type: "DELETE",
            url: "/corporate/employees/" + $("#emp-id").val(),
            complete: function(r){
                    $("#status").text(r.responseText);
                }
            })
            return false;
        })
</script>
<p><spring:message code="createEmployee.title"/>
<form class="emp-create">
    <label for="name" />
    <input type="text" id="name" value="create"/>
    <input type="submit" id="add-emp" />
</form>
<script type="text/javascript">
    $("#add-emp").click(function(){
        var employeeObject= { name: $("#name").val() }
        $.ajax({
            type: "POST",
            data: JSON.stringify(employeeObject),
            contentType: "application/json",
            url: "/corporate/employees"
        })
        return false;
    })
</script>

问题是单击删除按钮后，第二个表单消失。

之前:

之后:

如何才能确保单击删除按钮时第二个表单不会消失。

更新

DEMO

Answer 1

问题就在这里:

<span id="status"/>

将其更改为:

<span id="status"></span>

浏览器认为该范围是开放的，您的第二个表单是它的子表单，它被您的文本替换。