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/

推荐答案

1. 之所以会出现此问题，是因为jQuery Mobile用其他HTML标记包装<select>并向其添加了事件侦听器.诀窍是用原始的<select>替换包装的HTML，并在附加到页面后触发初始化:

1. 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屋！