Question

我在将列表项从一个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时，click事件仍然适用。

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

Answer 3

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

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

You can test it out here

目前，您的click处理程序位于<li>个元素上，并随之移动...而是将click处理程序放在.more-options <div>本身上，所以没有处理程序可以移动。如果您有多个元素，这也会更便宜：）

Answer 4

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

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

jQuery appendTo（）的问题

4 个答案: