用jquery克隆primefaces组件

Question

我有一个div组件要克隆，它包含primefaces组件，如下所示：

<div id="languageBox1">
    <p>
        <h:form>
            <label>Language</label>
            <p:selectOneMenu value="#{candidateController.language}">
                <f:selectItem itemLabel="Select Language" itemValue="language"></f:selectItem>
                <f:selectItems value="#{candidateController.languages}"
                               var="l" itemLabel="#{l}" itemValue="#{l}"></f:selectItems>
                <p:ajax event="change"
                        update=":formShowResult:candidateList :resultNumberForm"
                        listener="#{candidateController.valueChangeListener}"></p:ajax>
            </p:selectOneMenu>
            <p:selectOneMenu value="#{candidateController.languageLevel}">
                <f:selectItem itemLabel="Select Level" itemValue=""></f:selectItem>
                <f:selectItems value="#{candidateController.level}" var="lv"
                               itemLabel="#{lv}" itemValue="#{lv}"></f:selectItems>
                <p:ajax event="change" update=":formShowResult:candidateList"
                        listener="#{candidateController.valueChangeListener}"></p:ajax>
            </p:selectOneMenu>
            <button id="addLanguage" class="active_grey full">Add</button>
        </h:form>
    </p>
</div>

我创建了一个脚本来克隆这个div，如下所示：

$("#addLanguage").on("click",function(e){
    e.preventDefault();
    $("#languageBox1").clone().appendTo("#languageBox2");
});

现在我的问题是，克隆的选择不能工作，我只是不能选择任何选项，并且它不会再打开，我以为已冻结的预防性默认指令，但我使用它来阻止按钮提交表单。

Answer 1

好吧，我们来解决你的密码。我是这样修改的。

<div class="language-container">
    <div class="language-box">
        <p>
            <h:form>
                <label>Language</label>
                <p:selectOneMenu value="#{candidateController.language}">
                    <f:selectItem itemLabel="Select Language" itemValue="language"></f:selectItem>
                    <f:selectItems value="#{candidateController.languages}"
                        var="l" itemLabel="#{l}" itemValue="#{l}"></f:selectItems>
                    <p:ajax event="change"
                        update=":formShowResult:candidateList :resultNumberForm"
                        listener="#{candidateController.valueChangeListener}"></p:ajax>
                </p:selectOneMenu>
                <p:selectOneMenu value="#{candidateController.languageLevel}">
                    <f:selectItem itemLabel="Select Level" itemValue=""></f:selectItem>
                    <f:selectItems value="#{candidateController.level}" var="lv"
                        itemLabel="#{lv}" itemValue="#{lv}"></f:selectItems>
                    <p:ajax event="change" update=":formShowResult:candidateList"
                        listener="#{candidateController.valueChangeListener}"></p:ajax>
                </p:selectOneMenu>
                <button class="addLanguage active_grey full">Add</button>
            </h:form>
        </p>
    </div>
</div>

我所做的就是为您的语言框添加了一个language-container作为父程序。假设你的语言框将是你的孩子，它会一遍又一遍地重复。

为了方便起见，我删除了it，并将其更改为类。因为我们应该知道ids应该是唯一的基本规则。所以我们才要上课。

现在，我们将在单击的每个.addLanguage上调用一个单击事件处理程序。

$(document).on("click", ".addLanguage", function() {
    $(".language-box:first-child").clone().appendTo(".language-container");    
});

这所做的是，每次.addLanguage被点击。语言盒类(子框)将被克隆(第一个子/元素)并附加到父类.language-container。

对你来说，这是个小摆设。

https://jsfiddle.net/2tuqu2oL/