形态短暂地克隆，然后消失

虽然我设法让我的例子工作，我正在测试它的代码似乎不喜欢它。当我点击添加按钮时，复制的表单将出现在屏幕上一秒钟，然后立即消失。我基本上在JSFiddle中做同样的事情，虽然它要么用错误信息代替整个事情:{"错误":"Shell形式不验证{'html_initial_name': u'initial-js_lib'， 'form':， 'html_initial_id': 'js_lib'， 'label': u'initial-id_js_lib'， 'field':， 'help_text': "， 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap'， 'form':， 'html_name': 'js_wrap'， 'label': u'initial-id_js_wrap'， 'label': u'initial-id_js_wrap'， 'label': u' js wrap'， 'field':， 'help_text': '' label': u' js wrap'， 'label': u' js wrap'， 'field':， 'help_text': '"， 'name': 'js_wrap'}"}

，否则它会给我一个Forbidden 403错误。我用Firebug浏览了一下，我猜HTML/CSS中有JQuery不喜欢的东西，我只是不知道是什么。

HTML

<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>

Javascript

//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++;
});
})();

https://jsfiddle.net/c4dc0thx/4/

//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++;
    });
})();