jquery - jQuery appendTo() の問題

Question

ある ul から別の ul にリスト項目を追加する際に問題があります。各リスト項目がクリックされると、別の ul に追加されるはずです。ただし、これらの項目が追加されると、現在の ul.... に引き続き追加されます。つまり、リストの一番下に並べ替えられます。例えば：

<ul class="first-holder">
            <li><input type="checkbox" name="location1"  /> Location 1</li>
            <li><input type="checkbox" name="location2"  /> Location 2</li>
            <li><input type="checkbox" name="location3"  /> Location 3</li>
            <li><input type="checkbox" name="location4"  /> Location 4</li>
            <li><input type="checkbox" name="location5"  /> Location 5</li>


            </ul>


            <div class="more-options first-option">
            <ul>
            <li><input type="checkbox" name="location-6" checked="checked" /> Location 6</li>
            <li><input type="checkbox" name="location7" checked="checked" /> Location 7</li>
            <li><input type="checkbox" name="location8" checked="checked" /> Location 8</li>
            </ul>
            </div>

jquery:

$('div.more-options li').click(function() {

                $(this).appendTo($('ul.first-holder'));
                return false;

           });

何が起こるか: div.more-options のリスト項目は ul.first-holder に追加されますが、それらの項目が ul.first-holder にある場合、それらをクリックすると ul の末尾に追加されます。初代ホルダー。li が ul.first-holder に追加されると、どこにも移動してはなりません。それを実現する方法がわかりません。

score 0 · Accepted Answer

項目からイベントハンドラーを削除してみてください。クリックイベントの受信を停止するだけです。

$(this).unbind('click');
$(this).appendTo($('ul.first-holder'));

http://api.jquery.com/unbind/

score 0 · Accepted Answer

これは、クリックイベントが付加された状態でノードを移動しているためです。したがって、そのノードが他の ul に追加された場合でも、クリックイベントは適用されます。

ノードをコピーして追加するか、追加時にクリックイベントを削除できます。

score 0 · Accepted Answer

.delegate()代わりに、次のようにここを使用します。

$('div.more-options').delegate('li', 'click', function() {
  $('ul.first-holder').append(this);
});

ここでテストできます。

現在、clickハンドラーは<li>要素上にあり、それらと一緒に移動しています...代わりにclickハンドラーを.more-options <div>それ自体に配置するため、移動するハンドラーはありません。いくつかの要素がある場合、これは実行するのも安価です:)

score 0 · Accepted Answer

次のように、最初のclickイベントのみを処理します。

$('div.more-options li').one('click', function() { ... }):

jquery - jQuery appendTo() の問題

4 に答える 4

Related

Reference