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之后，它们就不应移到任何地方。 我不知道如何做到这一点。

Answer 1

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

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

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

Answer 2

那是因为您要移动附加了click事件的节点。 因此，当该节点附加到另一个ul时，click事件仍然适用。

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

Answer 3

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

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

您可以在这里进行测试 。

当前，您的click处理程序位于<li>元素上，并随其移动...相反，将click处理程序置于.more-options <div>本身上，因此没有可移动的处理程序。 如果您有多个元素，则执行起来也更便宜:)

Answer 4

您只想处理首次click事件，如下所示：

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