0

リストの最後に一対の li 要素を追加できる jquery を使用して UI のプロトタイプを作成しようとしています。最初のペアはうまくいきますが、追加のペアが追加されると、以前に注入された 2 つの要素 (li.box) の 1 つが消えます。ページに残る li.box は 1 つだけです。理由がわかりません。

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

1 に答える 1

2

JQuery は、li.box を実際に複製するのではなく、移動するだけです。したがって、コードは次のようになります。

li.after(liBox.clone());

フィドル: http://jsfiddle.net/yqXhM/1/

于 2013-03-21T00:30:37.647 に答える