Javascript 形成短暂的克隆，然后消失

虽然我设法让我的示例工作，但我测试它的代码似乎不喜欢它。当我单击add按钮时，复制的表单将在屏幕上出现一秒钟，然后立即消失。我在JSFIDLE中基本上做了同样的事情，尽管它用错误消息替换了整个内容：{错误：Shell表单不验证{'html_initial_name'：u'initial-js_lib'，'form'：，'html_name'：'js_lib'，'html_initial_id'：u'initial-id_js_lib'，'label'：u'js lib'，'field'，'help_text'，'name'：'js_lib'}'{'html_initial_name'：u'initial-js_wrap'，'form'：，'html_name'：'js_wrap'，'html_initial_id'：u'initial-id_js_wrap'，'label'：u'js wrap'，'help_text'，'name'：'js wrap'}

或者它会给我一个禁止的403错误。我用Firebug做了一个运行，我猜HTML/CSS中有一些东西是JQuery不喜欢的，我只是不知道是什么

HTML

单击New Employee（新员工）按钮可以有效地提交表单。只需在jQuery中使用preventDefault即可停止表单提交。或者，将按钮移到标记之外

<form method="post">
<fieldset id='EmployeeInfo' style='float: right'>
    <legend>Enter New Employee</legend>
    <table>
        <tr>
            <td class='td_small'>First Name:</td>
            <td class='td_wide'>
                <input id='EmpFirst' class='maxField' type='text' maxlength='35' />
            </td>
            <td class='td_small'>M.I.</td>
            <td class='td_xtrasmall'>
                <input id='EmpMI' class='minField' type='text' maxlength='35' />
            </td>
            <td class='td_mid'>Last Name:</td>
            <td class='td_wide'>
                <input id='EmpLast' class='maxField' type='text' maxlength='35' />
            </td>
        </tr>
        <tr>
            <td>Address:</td>
            <td colspan='2'>
                <input id='EmpAddress' class='mostField' type='text' maxlength='35' />
            </td>
            <td>&nbsp;</td>
            <td>Apt. No.</td>
            <td>
                <input id='EmpAptNo' class='maxField' type='text' maxlength='35' />
            </td>
        </tr>
        <tr>
            <td>City:</td>
            <td>
                <input id='EmpCity' class='maxField' type='text' maxlength='25' />
            </td>
            <td>State:</td>
            <td>
                <select id='EmpState'>
                    <option></option>
                </select>
            </td>
            <td>ZIP:</td>
            <td>
                <input id='EmpZIP' class='maxField' type='text' maxlength='25' />
            </td>
        </tr>
        <tr>
            <td>SSN:</td>
            <td>
                <input id='EmpSSN' class='maxField' type='text' maxlength='25' />
            </td>
            <td>Gender:</td>
            <td>
                <select id='EmpGender'>
                    <option></option>
                </select>
            </td>
            <td>Date of Birth:</td>
            <td>
                <input id='EmpDOB' class='maxField' type='text' maxlength='25' />
            </td>
        </tr>
        <tr>
            <td>Marital Status:</td>
            <td>
                <select id='EmpMarital'>
                    <option>Single</option>
                    <option>Married</option>
                    <option>Married/Filing Separately</option>
                    <option>Other</option>
                </select>
            </td>
            <td>Dependants:</td>
            <td>
                <select id='EmpDepend'>
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10+</option>
                </select>
            </td>
            <td>Head of Household:</td>
            <td>
                <input id='EmpHOH' type='checkbox' />
            </td>
        </tr>
        <tr>
            <td>Disability:</td>
            <td>
                <input id='EmpDisabled' type='checkbox' />
            </td>
            <td>US Citizen:</td>
            <td>
                <input id='EmpCitizen' type='checkbox' />
            </td>
            <td>I-9 Form:</td>
            <td>
                <input id='EmpINine' type='checkbox' />
            </td>
        </tr>
    </table>
</fieldset>
<br/>
<button id="add" style="text-align: center; width: 20%;float: right;">New Employee</button>

//Dupe form and append number every id attribute
(function () {

var count = 0;
$("#add").on("click", function () {

    var source = $("#EmployeeInfo"),
        clone = source.clone();

    clone.find(":input").attr("id", function (i, val) {
        return val + count;
    });

    clone.insertBefore(this);

    count++;
});
})();

//Dupe form and append number every id attribute
(function () {

    var count = 0;
    $("#add").on("click", function (e) {

        // Prevent the form from submitting
        e.preventDefault();

        var source = $("#EmployeeInfo"),
            clone = source.clone();

        clone.find(":input").attr("id", function (i, val) {
            return val + count;
        });

        clone.insertBefore(this);

        count++;
    });

})();