Question

当您点击＆＃34; ADD PHONE＆＃34;我想添加一个由输入字段和选择框组成的新行。按钮。我面临的问题是，当我克隆元素时，它们似乎克隆得很好，但是，选择框似乎不起作用。我无法将其更改为其他值。此外，如果填写了值，则在＆＃34;添加＆＃34;之前单击按钮，新添加的字段将包含相同的值。另一个问题是，如果我有两组字段，当我点击＆＃34; ADD PHONE＆＃34;按钮，它将关闭两个，并附加两个。

所以这是我的问题：
1）如何让克隆的选择框工作
2）如何确保克隆的字段为空？ 3）我怎样才能一次只克隆1个

我非常感谢你的帮助。

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');
});

DEMO http://jsfiddle.net/abLun3fp/1/

Answer 1

出现此问题是因为jQuery Mobile使用其他HTML标记包装<select>并向其添加事件侦听器。诀窍是用原始<select>替换包装的HTML，并在追加到页面后触发初始化：
```
clone.find('.ui-select').html(function() { return $(this).find('select')[0].outerHTML });
clone.appendTo('.phone-details');
clone.find('select').parent().enhanceWithin();
```
您可以在将其添加到页面之前清空克隆中的所有<input>值：
```
clone.find('input[type="text"]').val('');
```
可以使用:first：
来实现
```
 $('.phone-info:first')
```

或使用原始HTML：

     $('.phone-details #phone-number:first, .phone-details #phone-type:first')

由于强烈建议不要使用具有相同ID的多个元素，因此我将其更改为类。

Fiddle

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和原始HTML fiddle。

<强>更新即可。感谢@Omar指出<input>和.enhanceWithin()的错误。

jQuery：克隆点击工作中的输入字段，但无法更改选择框值

1 个答案: