Почему не работает document.onclick на сдвинутых элементах с Position:absolute?

Question

[Артём]

Почему не работает document.onclick на сдвинутых элементах с Position:absolute?
Я с помощью драг энд дропа двигаю элемент, который в конце на mouseup вставляю в контейнер. После такой манипуляции у меня не срабатывает onclick внутри этой функции

function transformClick(e){
       console.log(1)
        backetFlag = false;  
        chooseColorFlag = false; 
        moveFlag= false;    
        transformFlag = true;
        document.body.style.cursor = "url('images/transform.png'), auto";

        document.onclick = function(event){
            console.log(2)
            target = event.target; 
            console.log(target)
            if(event.target.closest('div').classList.contains('canvasElem') && transformFlag == true){
                
                event.target.classList.toggle("circle-canvas")
            }
        }   
    }

на перемещенном элементе,

<section class="canvas">   
            <div class="canvContainer">
                <div class="canvasElem"></div>
            </div>
            <div class="canvContainer">
                <div class="canvasElem"></div>
            </div>
            <div class="canvContainer">
                <div class="canvasElem"></div>
            </div>
            <div class="canvContainer">
                <div class="canvasElem"></div>
            </div>
            <div class="canvContainer">
                <div class="canvasElem"></div>
            </div>
            <div class="canvContainer">
                <div class="canvasElem"></div>
            </div>
            <div class="canvContainer">
                <div class="canvasElem"></div>
            </div>
            <div class="canvContainer">
                <div class="canvasElem"></div>
            </div>
            <div class="canvContainer">
                <div class="canvasElem"></div>
            </div>

Причем на других дивах из контейнера .canvas все работает нормально, в чем может быть дело?

Comments

[Антон Швец]

покажите полный пример. из ваших фрагментов непонятно что именно происходит.

Answer 1

[UndineS]

Посмотрите ответы к вопросу События для динамически добавленных в DOM элементов

Кратко: если объект DOM переносится куда-либо (не просто изменение CSS, а удаление+вставка, перенос в другой блок), то события jQuery не сработают на нем стандартным способом

document.onclick = function(event){
//код функции
}

Необходимо использовать функцию on() для динамических элементов:

$(document).ready(function() {
    ...
    $('.clickable-elements element').on('click', 'a', function(e){
        //Какое-то действие
    });
   ...
});

Comments

[Антон Швец]

Кратко: где вы тут увидели события jQuery и события для динамически добавленных элементов?
document динамически вроде не добавляется

[UndineS]

Антон Швец, drag&drop (и фраза "вставляю в контейнер") с большой долей вероятности подразумевают собой, как минимум, изменение положения элемента в DOM-дереве. После этого у элементов могут появляться вышеописанные особенности.
Возможно, ошибаюсь, так как не знаю реализации Drag&Drop в конкретно данном случае и строю предположения.

[Антон Швец]

UndineS, событие слушается на document, а не на элементах