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

现在我的问题是，克隆的选择不起作用，我只是无法选择任何选项，并且它不会再打开，我认为 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>

我所做的是添加一个语言容器作为您的语言框的父级。假设您的语言框将是您的 child ，它会一遍又一遍地重复。

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

现在我们将在每次单击 .addLanguage 时调用单击事件处理程序。

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

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

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

https://jsfiddle.net/2tuqu2oL/