jQuery:单击工作时克隆输入字段,但无法更改选择框的值 [英] jQuery: Clone input fields on click work, but select box values cannot be changed
问题描述
当您单击添加电话"按钮时,我想添加一个包含输入字段和选择框的新行.我面临的问题是,当我克隆元素时,它们似乎可以很好地克隆,但是,选择框似乎不起作用.我无法将其更改为其他值.另外,如果填写了值,则在单击添加"按钮之前,新添加的字段将包含相同的值.另一个问题是,如果我有两组字段,则当我单击添加电话"按钮时,它将同时关闭这两个字段并追加两个字段.
I would like to add a new row which consists of an input field and a select box when you click the "ADD PHONE" button. The problem i'm facing, is that when I clone the elements, they seem to clone fine, however, the select-box doesn't seem to work. I cannot change it to a different value. Also, if the values are filled out, before the "add" button is clicked, the newly added fields will have contain the same values. Another issue is that if I have 2 sets of fields, when I click the "ADD PHONE" button, it will close both, and append both.
这是我的问题:
1)如何使克隆的选择框起作用?
2)如何确保克隆的字段为空
3)如何一次只克隆1个
So here are my questions:
1) How can I get the cloned select box to work
2) How can I make sure that the cloned fields are empty
3) How can I clone just 1 at a time
非常感谢您的帮助.
HTML
<button id="add-phone-button">Add Phone</button>
<div class="phone-details">
<div id="phone-number" class="col-xs-8">
<label for="phone" class="invisible">Phone</label>
<input type="text" id="phone" class="phone" placeholder="Phone"/>
</div>
<div id="phone-type" class="col-xs-4">
<label for="usage" class="invisible">Usage</label>
<select id="usage" />
<option selected="selected">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
jQuery
$('#add-phone-button').click(function() {
$('.phone-details #phone-number, .phone-details #phone-type').clone().appendTo('.phone-details:last-child');
});
演示 http://jsfiddle.net/abLun3fp/1/
推荐答案
-
之所以会出现此问题,是因为jQuery Mobile用其他HTML标记包装
<select>
并向其添加了事件侦听器.诀窍是用原始的<select>
替换包装的HTML,并在附加到页面后触发初始化:
The problem occurs because jQuery Mobile wraps
<select>
with additional HTML tags and adds event listeners to them. The trick is to replace wrapped HTML with original<select>
and to trigger initialization on it after appending to page:
clone.find('.ui-select').html(function() { return $(this).find('select')[0].outerHTML });
clone.appendTo('.phone-details');
clone.find('select').parent().enhanceWithin();
您可以先将克隆中所有<input>
的值清空,然后再将其添加到页面中:
You can empty all <input>
s values in clone before adding its to page:
clone.find('input[type="text"]').val('');
可以使用:first
来实现:
It can be achieved using :first
:
$('.phone-info:first')
或使用原始HTML:
$('.phone-details #phone-number:first, .phone-details #phone-type:first')
由于强烈建议不要使用具有相同ID的多个元素,因此我将它们更改为类.
Since using multiple elements with same ID is strongly discouraged, I changed them to classes.
HTML:
<button id="add-phone-button">Add Phone</button>
<div class="phone-details">
<div class="phone-info">
<div class="phone-number col-xs-8">
<label for="phone" class="invisible">Phone</label>
<input type="text" name="phone" class="phone" placeholder="Phone"/>
</div>
<div class="phone-type col-xs-4">
<label for="usage" class="invisible">Usage</label>
<select name="usage">
<option selected="selected">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</div>
JS:
$('#add-phone-button').click(function()
{
var clone = $('.phone-info:first').clone();
clone.find('.ui-select').html(function() { return $(this).find('select')[0].outerHTML });
clone.find('input[type="text"]').val('');
clone.appendTo('.phone-details');
clone.find('select').parent().enhanceWithin();
});
如果您想保留原始HTML,请使用固定的JS和原始 fiddle HTML.
If you somewhy want to stay with your original HTML, here is fiddle with fixed JS and original HTML.
更新.感谢@Omar指出<input>
和.enhanceWithin()
的错误.
Update. Thanks to @Omar for pointing out an error with <input>
and for .enhanceWithin()
.
这篇关于jQuery:单击工作时克隆输入字段,但无法更改选择框的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!