JQuery AppendTo ошибка

Question

Я работаю с некоторыми jquery и нашел странное поведение функции jquery .appendTo().

Посмотрите этот код here.

Когда вы нажимаете на каждый элемент первого столбца, щелкнутый элемент добавляется ко второму столбцу.

Если вы нажмете пункты 3 и 4, все будет работать должным образом: они будут добавлены в том порядке, в котором вы их нажали. Когда вы нажмете на элемент 1, он будет добавлен правильно.

Проблема есть, когда вы нажимаете на пункт 2. Этот предмет находится внутри предмета 1.

Этот предмет не прилагается к концу div, он добавляется поверх его старого родителя!

Посмотрите изображения:

Теперь, что я ожидал, что против того, что я получаю:

Если нажать еще раз по пункту 2 он будет добавлен на конец div.

У этого поведения есть некоторые объяснения? Это на самом деле ошибка?

Как я могу обойти это?

Ps: Jquery 1.10.1

Answer 1

При нажатии на пункт 2, "щелчок" событие отправляется как пункт 2 и пункт 1, потому что пункт 2 (когда "щелчок" происходит) является ребенок элемента 1. Событие пузырится, и родитель получает его тоже.

Таким образом, вы нажимаете на элемент 2 и запускаете обработчик событий. Пункт 2 добавляется к цели. Затем событие пузырится к элементу 1, а обработчик событий снова запускается. Теперь, пункт 1 добавляется после пункта 2, поскольку (в этой точке) пункта 2 больше не ребенок пункта 1.

Вердикт: не ошибка.

Вы можете изменить свой обработчик, чтобы предотвратить это:

$('.item').on('click', function(e){ 
    // Append clicked item on destiny div 
    $(this).appendTo($('.destiny')); 
    e.stopPropagation(); // stop the event from bubbling further up 
});