Question

在我的页面上，我想在用户点击select按钮时复制ADD元素。我在下面有以下代码，您也可以在此jsfiddle上看到。

<select id="sel">
    <option>1</option>
    <option>2</option>
</select>
<button id="add">ADD</button>
<div id="test"></div>
<script>
var copy = $('#sel').clone().attr('id', '');

$('#add').click(function(){
    $('#test').append(copy);    
});
</script>

代码应添加等量的select元素，因为用户点击了ADD按钮。但它只添加了一个选择，并且在第一次单击ADD按钮后似乎覆盖了最初添加的选项。

我做错了什么？

Answer 1

您希望每次点击一次时都克隆一个新的：

$('#add').click(function(){
    var copy = $('#sel').clone().attr('id', '');
    $('#test').append(copy);    
});

小提琴：https://jsfiddle.net/ma65yuvd/3/

Answer 2

// Clones element, creating new element, call it "ElementB"
var copy = $('#sel').clone().attr('id', '');

// Every time you click "add"
$('#add').click(function(){

    // Append "ElementB" to "#test"
    $('#test').append(copy);    
});

换句话说，您只创建一个DOM元素。第一个.append会将该元素移至#test。之后的.append调用也会将其移至#test，这将导致无法进行净更改。

一个简单的解决方法是每次都调用.clone：

var original = $('#sel');

$('#add').click(function(){
    // Now a new element is created for each click!
    var copy = original.clone().attr('id', '');
    $('#test').append(copy);    
});

Answer 3

您必须在click事件中移动克隆！

<select id="sel">
    <option>1</option>
    <option>2</option>
</select>
<button id="add">ADD</button>
<div id="test"></div>
<script>

$('#add').click(function(){
    var copy = $('#sel').clone().attr('id', '');
    $('#test').append(copy);    
});
</script>

jQuery append select只能工作一次

3 个答案: