jquery - jQuery appendTo() 的问题

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 的末尾。第一持有人。一旦 li 被附加到 ul.first-holder 他们不应该移动到任何地方。我不知道如何做到这一点。

score 0 · Accepted Answer

那是因为您正在移动附加了 click 事件的节点。因此，当该节点附加到另一个 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() { ... }):

score 0 · Accepted Answer

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

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

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

jquery - jQuery appendTo() 的问题

4 回答 4

Related

Reference