Question

我在按下按钮时使用JQuery添加表单元素。问题是我无法获取要渲染的元素。只显示文本“ - 开始输入名称 - ”。当我右键单击并检查元素时，我会看到所有jquery渲染的元素。没有样式可以使新添加的元素无法查看。没有控制台错误。

这是我的.js文件的一个片段，它应该插入表单元素

$(document).ready(function() {


    var orgPosition = 0;
    $("#addOrgButton").click(function() {
        orgPosition++;

        $('#orgs').append('<br><div class="field_container"><form:label path="org_id"><spring:message code="label.org_id" /></form:label><form:select id="org_id" class="selectorg" path="jobOrgs[' + orgPosition + '].org_id"><form:option value="0">-- Start typing name --</form:option><form:options items="${organizationsList}" itemLabel="organization" itemValue="org_id" /></form:select></div>');
    });

来自我的jsp ......

<form:form id="formid" method="post" action="addJob.html" commandName="jobModel">
    <div id="orgs">
        <div class="field_container">
            <form:label path="full_name">
                <spring:message code="label.jobFullName" />
            </form:label>
            <form:input class="input" path="full_name" />
            <form:errors path="full_name" cssClass="job_error" />
        </div>
        <br>
        <div class="field_container">
            <form:label path="abbreviation">
                <spring:message code="label.abbreviation" />
            </form:label>
            <form:input path="abbreviation" />
        </div>
        <br>
        <div class="field_container">
            <form:label path="org_id">
                <spring:message code="label.org_id" />
            </form:label>
            <spring:bind path="jobOrgs[0].org_id">
                <form:select id="org_id" class="selectorg" path="${status.expression}">
                    <form:option value="0">-- Start typing name --</form:option>
                    <form:options items="${organizationsList}" itemLabel="organization" itemValue="org_id" /></form:select>
            </spring:bind>
        </div>
    </div>
    <input type="button" id="addOrgButton" value="Add" />
    <br>
</form:form>

这是点击“添加”后页面的相关元素的屏幕截图。正如您所看到的，页面上有元素，但它们是不可见的。我应该有两个“组织”下拉列表。 my page after clicking "Add"

Answer 1

这里有一篇非常有用的文章...... jquery clone form fields and increment id

所以答案是使用clone（）并使用正则表达式来增加索引。上面的链接给出了详细信息和示例。附加一个Spring表单元素将不起作用，因为附加发生在浏览器端，而spring表单元素是在服务器端编译的。浏览器对Spring元素一无所知。

JQuery .append（）添加了不可见元素，可见文本

1 个答案: