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.first-holder 的末尾。一旦 li 被附加到 ul.first-holder，它们就不应该移动到任何地方。我不知道如何实现这一点。

Answer 1

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

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

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

Answer 2

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

您可以复制节点并追加该节点，也可以在追加时删除单击事件。

Answer 3

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

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

您可以在此处进行测试。

目前，您的 click 处理程序位于

元素上，并随它们一起移动...而是将 click 处理程序放在 >.more-options

本身，因此没有要移动的处理程序。如果您有多个元素，执行起来也会更便宜:)

Answer 4

您只想处理第一个 click 事件，如下所示：

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