Проблема с 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-опций будет добавлять к ul.first-держатель, но тогда, когда эти элементы в ul.first-holder, нажатие на них приведет к их добавлению в конец ul.first-holder. Как только li были добавлены к ul.first-владельцу, они не должны двигаться нигде. Я не могу понять, как это сделать.

Answer 1

Попробуйте удалить обработчик событий из объекта. Он просто прекратит получать события кликов.

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

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

Answer 2

Это потому, что вы движетесь узел с событием щелчка прикрепленным к нему. Поэтому, когда этот узел добавляется к другой ul, событие 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> элементов, и двигаться с ними ... вместо того, чтобы поставить click обработчик на самом .more-options<div>, так что нет ни одного обработчика для перемещения. Это и дешевле выполнить, если у вас есть больше, чем несколько элементов :)

Answer 4

Вы хотите обрабатывать только первый click события, как это:

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