[英]jQuery + Appending a clone multiple times, at different times?
I have this form which has a section where a user can specify an indefinite number of value pairs, specifically, a language and a level of proficiency. 我有这个表单,其中有一个用户可以指定无限数量的值对的部分,特别是语言和熟练程度。
I have the DOM structured like this: 我有这样的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" />
If the user clicks on the Add another language...
button, a new list item containing the same form elements should be inserted to the list. 如果用户单击“
Add another language...
按钮,则应将包含相同表单元素的新列表项插入到列表中。
And here is my code: 这是我的代码:
$(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();
});
});
});
But the clone seems to be only usable once. 但克隆似乎只能使用一次。 Upon clicking the
Add a language...
button the second time, no list item is appended. 在第二次单击“
Add a language...
按钮时,不会附加任何列表项。 (Interestingly, when I output the variable on the console, it still contains the clone!) (有趣的是,当我在控制台上输出变量时,它仍然包含克隆!)
One way around this would be saving the HTML mark-up as a string, but I am avoiding this approach as the elements are dynamically loaded via PHP, and I'd rather just change one part of my code whenever I need to modify the mark-up. 解决这个问题的一种方法是将HTML标记保存为字符串,但我避免使用这种方法,因为元素是通过PHP动态加载的,而我只需要在需要修改标记时更改代码的一部分-up。
How can I possibly make this work? 我怎么可能做这个工作?
You will have to clone it every time when you want to add 每次要添加时都必须克隆它
$('#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);
});
As per comment: 根据评论:
Keep one li like this: 像这样保持一个li:
<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>
Where .hidden
just marks it to display:none;
其中
.hidden
只标记它display:none;
.hidden{
display:none;
}
Then while cloning you always clone this li and make it visible so that even if user has deleted all the li, new elements can still be added. 然后在克隆时你总是克隆这个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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.