jQuery appendTo()的问题

Question

我在将列表项目从一个ul附加到另一个ul时遇到问题。当每个列表项被点击时，它应该被附加到另一个ul中。但是，一旦这些项被附加，它们将继续将自己附加到当前的ul....meaning中，并将自己排序到列表的底部。例如：

<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.first-holder的末尾。一旦li被附加到ul.first-holder之后，它们就不应该移动。我想不出该怎么做。

Answer 1

请尝试从该项中删除事件处理程序。它将停止接收点击事件。

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

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

Answer 2

这是因为您正在移动附加了click事件的节点。因此，当该节点被附加到另一个用户界面时，单击事件仍然适用。

您可以复制节点并追加该节点，也可以在追加时移除click事件。

Answer 3

在这里使用.delegate()，如下所示：

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

You can test it out here。

目前，您的click处理程序位于<li>元素上，使用them...instead移动会将click处理程序放在.more-options <div>本身上，因此没有要移动的处理程序。如果您有多个元素，这也会降低执行成本:)