4

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

我的 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 动态加载的，我宁愿在需要修改标记时只更改代码的一部分-向上。

我怎么可能做到这一点？

4

1 回答 1

10

每次要添加时都必须克隆它

 $('#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);

    });

演示

根据评论：

像这样保持一里：

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

演示

于 2012-04-29T17:49:35.167 回答