我正在尝试使用 jquery 对 UI 进行原型设计,它允许在列表末尾添加一对 li 元素。第一对运行良好,但随着其他对的添加,两个较早注入的元素(li.box)中的一个消失了。页面上只会保留一个 li.box。我不知道为什么。
HTML
<ul id="ruleset" class="ruleset">
<li class="rule"">
<div class="text">Rule </div>
<select name="join" class="join">
<option value="+">+</option>
<option value="AND">AND</option>
<option value="OR">OR</option>
</select>
</li>
</ul>
Javascript
$(document).ready(function(){
var liBox=$('<li>').attr('class','box').text('>');
$('body').on('change', 'select.join', function(){
var copy=$(this).parent().clone();
var li = $(this).parent();
var par=li.parent();
li.after(liBox); //an item between each rule to eventually contain controls
par.append(copy); //a copy of the rule item
});
});