В процессе
создания сайтов и работы с jQuery многие сталикаются с ошибкой Uncaught typeerror: cannot read property 'addeventlistener' of null и чаще всего на решение данной проблемы уходит несколько часов или дней, что существенно влияет на сроки выполнения задачи. В нашем случае мы столкнулись с данной ошибкой при работе с подгрузкой данных через InfiniteScroll, но также данная ошибка может встречаться и в других случаях.
Что может вызвать ошибку Uncaught typeerror: cannot read property 'addeventlistener' of null
Появление ошибки в нашем случае обнаружено при загрузке второй страницы контента с помощью навигации InfiniteScroll. Ввиду того, что в подгружаемом контейнере присутствует скрипт подсчета цены на странице, вызываемый ID элемента при этом отсутствовал. То есть ошибка возникает именно из-за отсутствующего элемента, который вызывал вложенный JS скрипт, при этом в консоли сразу показывается ошибка.
Почему рабочий элемент может отсутствовать
Это очередной случай, когда внимательность играет очень большую роль. В нашем случае мы получили ошибку по той причине, что у нас срабатывал скрипт реагирующий на изменение селектора <select>. Так как товаров на странице множество, каждому селектору присвоен уникальный идентификатор (ID), с которым в том числе взаимодействовал подготовленный нами jquery скрипт. В одном из товаров селектор отсутствовал вообще, т.к. там нет вариантов выбора каких-либо опций товара, но скрипт при этом был подключен и искал селектор, что и вызвало появление ошибки на странице. В других случаях данная ошибка может возникать при неправильном формировании ID и указании ID элементов в рабочих скриптах.
Как исправить ошибку
Ошибку исправить довольно просто, для этого нужно проверить правильность всех ID элементов на странице и работающих с ними скриптов. В случаях, если нужный селектор отсутствует, нужно также отключать и обрабатывающий его скрипт, при этом появление данной ошибки будет исключено. По логике вещей отключение скрипта также будет более правильным решением при отсутствии селектора и необходимости выполнения данного скрипта, ведь зачем нужен лишний код на странице?
При создании сайтов и работе с любыми скриптами необходимо уделять большое внимание каждым мелочам, а также уметь работать с ID элементов. Наиболее распространенные ошибки чаще всего появляются именно из-за невнимательности. Надеемся, что данный материал окажется Вам полезен и поможет решить проблему, при этом сэкономив огромное количество времени!
