0

div が複製されたときにオプションを選択するのに問題があります。

クローンを作成したら、オプションを選択して、選択したクラスを提供できるようにしたいと考えています。したがって、複製された各 div には、選択されたオプションがあります。

私のデモをチェックして、クローンを作成してみてください。

http://jsfiddle.net/XeELs/60/

Jクエリ

var cloneCount = 0;
$("#add-address").click(function() {

    $("#to-add-address").clone()
        .attr("id", "to-add-address_Clone" + cloneCount)
        .insertAfter("#to-add-address");
    $("#clone", "#to-add-address_Clone" + cloneCount)
        .attr("id", "clone_Clone" + cloneCount);
    cloneCount++;

    $('.options li a').bind('click',function () {
            $('.options li a').removeClass('selected');
            $(this).addClass('selected');
        });

});

HTML

<ul>    
    <li id="to-add-address" class="outerDiv address" >
        <div id="clone">
            <label><input type="text" value="Address"><span class="input-edit"></span></label>
            <label><input type="text" value="Address 2"><span class="input-edit"></span></label>
            <label><input type="text" value="Town"><span class="input-edit"></span></label>
            <label><input type="text" value="Contry"><span class="input-edit"></span></label>
            <label><input type="text" value="Post Code"><span class="input-edit"></span></label>

            <ul class="options">
                <li class="home"><a href="javascript:void(0);">home</a></li>
                <li class="work"><a href="javascript:void(0);">work</a></li>
                <li class="other"><a href="javascript:void(0);">other</a></li>
                <li class="delete"><a href="javascript:void(0);">delete</a></li>
            </ul>
        </div>
    </li>
</ul>


<a href="javascript:void(0);" id="add-address">clone</a>
4

1 に答える 1

2

これを次のように変更して、そのクローン内の要素のみに影響を与えることができます。

$(this).closest(".options").find('li a').removeClass('selected');

さらに、毎回クリックを再バインドしているため、各要素のリスナーの数がクローンごとに増加します。代わりに、イベント委任を使用します。

    $(document).on("click", '.options li a',function () {
        var $this = $(this);
        $this.closest(".options").find('li a').removeClass('selected');
        $this.addClass('selected');
    });

実際のコードに共通の親がある場合はdocument、適切なセレクターに置き換えてください。

http://jsfiddle.net/XeELs/61/

于 2012-04-13T14:44:21.490 に答える