Блог

Главная - Вопросы по программированию - querySelector работает на одной странице, но не на другой, и предотвращает событие перетаскивания?

querySelector работает на одной странице, но не на другой, и предотвращает событие перетаскивания?

#javascript #dom-events #queryselector

Вопрос:

Я использую queryseletor для выбора этого элемента:

 <table class="table table-head-fixed text-nowrap">
   <ul class="ticketsContainer">
   </ul>
</table>

Я сделал это:

 const ticketsContainer = document.querySelector(".ticketsContainer");

И он отлично работает на одной странице, но на другой возвращает значение null, не знаю, что я делаю не так. И это предотвращает dragover правильную работу одного из приведенных ниже событий, и
моя консоль регистрирует эту ошибку:

 custom.js:132 Uncaught TypeError: Cannot read property 'addEventListener' of null

sprintTicketContainers.forEach(sprintTicketContainer => {


  sprintTicketContainer.addEventListener("dragover", e => {
        e.preventDefault()
        const currentDraggingTicket = document.querySelector(".draggingTicket");
        const dragAfter = getDragAfterElement(sprintTicketContainer, e.clientY);
        if (dragAfter == null) {
            sprintTicketContainer.appendChild(currentDraggingTicket);
        } else {
            sprintTicketContainer.insertBefore(currentDraggingTicket, dragAfter);
        }

    });
});

ticketsContainer.addEventListener("dragover", e => {
    e.preventDefault()
    const currentDraggingTicket = document.querySelector(".draggingTicket");
    const dragAfter = getDragAfterElement(ticketsContainer, e.clientY);
    if (dragAfter == null) {
        ticketsContainer.appendChild(currentDraggingTicket);
    } else {
        ticketsContainer.insertBefore(currentDraggingTicket, dragAfter);
    }

});

Который я тестировал, так как они оба делают одно и то же, но на разных страницах.

Комментарии:

1. Спасибо за это редактирование, мистер Брайан.

2. Требуется немного больше информации, но убедитесь, что сценарий, который содержит const ticketsContainer = document.querySelector(".ticketsContainer") , запущен до сценария, который содержит ticketsContainer.addEventListener("dragover",

3. Я думаю, да, так как они находятся в одном файле с параметром querySelector в первой строке, и я думал, что речь идет о проблеме загрузки DOM, но, по-видимому, это не так.

4. В таком случае, насколько я вижу, в коде нет ничего плохого. Это сообщение об ошибке ускользает от документа. querySelector(«.ticketsContainer») не может найти элемент, поэтому моей единственной другой мыслью было бы убедиться, что скрипт запускается после загрузки содержимого DOM. Вы можете сделать это, поместив скрипт в нижней части HTML-кода или добавив defer модификатор в тег сценария

Метки: , ,