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

Answer 1

Вы хотите обработать только первое click событие, например:

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

Answer 2

Это потому, что вы перемещаете узел с прикрепленным к нему событием click.Поэтому, когда этот узел добавляется к другому ul, событие click все еще применяется.

Вы можете либо скопировать узел и добавить его, либо удалить событие click при добавлении.

Answer 3

Используйте .delegate() здесь вместо этого, как здесь:

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

Вы можете проверить это здесь .

В настоящее время ваш *Обработчики 1011 * находятся на элементах <li> и перемещаются вместе с ними ... вместо этого поместите обработчик click на сам .more-options <div>, чтобы не было обработчиков для перемещения.Это также дешевле выполнить, если у вас есть несколько элементов:)

Answer 4

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

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

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