使用 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");
});

现在我的问题是，克隆的 selects 将无法工作，我无法 select 任何选项并且它不会再打开，我认为 preventdefault 指令已冻结，但我正在使用它来防止按钮提交表单。

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 作为 parent。 Assuming-ly 你的语言框将是你的 child 会一遍又一遍地重复。

为了方便起见，我删除了 ID，并将其更改为 class。因为我们应该知道 id 应该是唯一的基本规则。这就是为什么我们将使用 class.

现在我们要在每次 .addLanguage 被点击时调用点击事件处理程序。

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

它的作用是，每次单击 .addLanguage。语言框 class（child 框）将被克隆（第一个 child / 元素）并附加到 parent class .language-container。

为了让您欣赏，这里有一个 jsfiddle。

https://jsfiddle.net/2tuqu2oL/

使用 jquery 克隆 primefaces 组件

clone primefaces components with jquery

javascript

jquery

primefaces

preventdefault