Question

我有这个表单，其中有一个用户可以指定无限数量的值对的部分，特别是语言和熟练程度。

我的DOM结构如下：

<ul id="language-list">
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
</ul>
<input type="button" value="Add another language..." id="add-a-language" />

如果用户点击Add another language...按钮，则应在列表中插入包含相同表单元素的新列表项。

这是我的代码：

$(function(){

    //Save a clone of one list item during initialization.
    var liItem = $('.user-language-item').last().clone(); 

    $('#add-a-language').click(function(){

        //Append the clone to the list item. But this only works once!
        $('#language-list').append(liItem);

    });

    //Note that there might be an instance where there are no list items present, which is why I opted to clone the a list item during initialization.
    $('.remove-language').live('click', function(){
        $(this).parents('li.user-language-item').fadeOut(500, function(){
            $(this).remove();
        });
    });

});

但是克隆似乎只能使用一次。第二次单击Add a language...按钮时，不会附加任何列表项。（有趣的是，当我在控制台上输出变量时，它仍然包含克隆！）

解决这个问题的一种方法是将HTML标记保存为字符串，但我避免使用这种方法，因为元素是通过PHP动态加载的，而我只是在需要时只需更改代码的一部分。修改标记。

我怎样才能做到这一点？

Answer 1

每次要添加

时，都必须克隆它

 $('#add-a-language').click(function(){
       var liItem = $('.user-language-item').last().clone(); 
        //Append the clone to the list item. But this only works once!
        $('#language-list').append(liItem);

    });

Demo

根据评论：

保持一个像这样的人：

<li class="user-language-item hidden" id="placeHolderLi">
    <select name="language[]" class="user-language-select">...</select>
    Level: <select name="proficiency[]">...</select>
    <input type="button" value="Remove" class="remove-language" />
</li>

.hidden只是将其标记为display:none;

.hidden{
  display:none;
}

然后在克隆时你总是克隆这个li并使其可见，这样即使用户删除了所有li，仍然可以添加新元素。

$('#add-a-language').click(function(){
      var liItem = $('.user-language-item:first').clone(true).show();
      //Append the clone to the list item. But this only works once!
      $('#language-list').append(liItem);
 });

Demo

jQuery +在不同的时间多次附加一个克隆？

1 个答案: