jQuery + 在不同时间多次附加克隆
jQuery + Appending a clone multiple times, at different times?
我有这个表格,其中有一个部分,用户可以在其中指定无限数量的值对,特别是语言和熟练程度。
我的 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 动态加载的,并且每当我需要修改标记时,我宁愿只更改代码的一部分。
我怎么可能做到这一点?
每次要添加时都必须克隆它
$('#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);
});
演示
相关文章:
- Jquery如何检查今天的时间大于使用给定时间
- Jquery函数在错误的时间提交
- Moment/Jquery-一个简单时间线的愚蠢问题
- javascript/jquery将utc转换为短格式的本地时间
- 正在停止.在jquery中的特定时间间隔内,每次迭代的每次执行
- 用Jquery map和moment js制作一个简单的时间线
- 在jQuery中,短距离长持续时间的精细字体大小动画
- Jquery时间启动计时器,我有一个计时器的代码,但它在页面加载时启动
- Jquery:直到寄存器打开的时间计数器
- 如何检查日期选择器和时间选择器元素是否使用JQuery/Javascript设置
- 当出现多个字段时,jquery时间条目问题
- 如何优化这个jquery循环的执行时间
- 在jQuery中为同一类选择器分配不同的值
- 在jquery中对时间数组进行排序
- 使用jquery在特定的时间间隔自动切换/动画css类
- jQuery动画的持续时间就像一个延迟
- 在同一类 JQUERY 的不同时间触发事件
- DateTimePicker -禁用一天中已经过去的时间(JQuery)
- 即-按键发生的所有时间- jquery
- 设置日期和时间JQuery的问题