[英]clone primefaces components with jquery
I have a div component to clone that contains primefaces components and that goes like this : 我有一个要克隆的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>
And I've created a script to clone this div
, that goes like this: 并且我创建了一个脚本来克隆此
div
,如下所示:
$("#addLanguage").on("click",function(e){
e.preventDefault();
$("#languageBox1").clone().appendTo("#languageBox2");
});
Now my problem is, the cloned selects won't work, I just can't select any option and it won't open any more, I thought the preventdefault instruction made frozen but I'm using it to prevent the button from submitting the form. 现在我的问题是,克隆的选择将无法工作,我只是无法选择任何选项,它将无法再打开,我以为preventdefault指令已冻结,但我正在使用它来防止按钮提交形成。
Okay, let's fix your code. 好的,让我们修复您的代码。 I've modified it like this.
我已经修改过了
<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>
What I've did is I added a language-container
as a parent for your language box. 我所做的是我添加了一个
language-container
作为您的语言框的父级。 Assuming-ly your language box will be your child that will repeat over and over again. 假设您的语言盒将是您的孩子,将一遍又一遍地重复。
I've removed the ids for convenience sake and I changed it to class. 为了方便起见,我删除了ID,并将其更改为class。 Since we should know the basic rules that ids SHOULD be unique.
因为我们应该知道id的基本规则应该唯一。 That's why we'll be using class.
这就是为什么我们将使用类。
Now we're gonna call a click event handler on every .addLanguage
has been clicked. 现在,我们将在每个被单击的
.addLanguage
上调用一个click事件处理程序。
$(document).on("click", ".addLanguage", function() {
$(".language-box:first-child").clone().appendTo(".language-container");
});
What this does is, everytime that .addLanguage
has been clicked. 这样做是每次单击
.addLanguage
。 The Language box class (child box) will be cloned (first child / element) and append to the parent class .language-container
. 语言框类(子框)将被克隆(第一个子元素/元素),并追加到父类
.language-container
。
For you to appreciate it, here's a jsfiddle. 为了让您欣赏它,这是一个jsfiddle。
https://jsfiddle.net/2tuqu2oL/ https://jsfiddle.net/2tuqu2oL/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.