ChessboardJs: доски Javascript работают только в первый раз

Question

Редактировать: Код страницы можно найти на URL моей страницы. Я не знаю, где может быть ошибка. Пожалуйста, помогите.

Проблема:

Когда мы впервые нажимаем на страницу с шахматными головоломками, они работают. Однако доски исчезают, когда мы повторно нажимаем на них с домашней страницы.

Демо-версия:

Это домашняя страница.

Вы нажимаете на фотографию игрока, и вы попадаете на эту страницу. Обратите внимание, что доски появляются в этом.

Но вы видите эту ссылку, чтобы вернуться к списку головоломок. Вы нажимаете на это и снова попадаете на домашнюю страницу.

Теперь, если вы нажмете на фотографию любого игрока (или даже фотографию того же игрока), это то, что вы получите.

Отныне ни одна из ссылок головоломки не будет работать.

Вы можете проверить это самостоятельно на chess-puzzle.com .

Немного информации:

Сайт использовал Cloudfare. Я тестировал с Cloudfare (неактивным) несколько минут назад, но проблема не решена.

Я проверил JS, и, похоже, все в порядке.

У меня есть только один CSS-файл (mycss.css). Другие внешние файлы поставлялись вместе с программным обеспечением.

Я не знаю, какой код поделиться, потому что я не знаю, почему это может произойти. Хотя я могу поделиться любым кодом, отредактировав этот вопрос, если потребуется.

Может кто-нибудь дать ответ на этот вопрос.

Answer 1

Проблема в том, что у вас есть атрибут async в скриптах (jquery, chessboard), и это означает, что они не загружаются в каком-либо определенном порядке.

Но на некоторых этапах шахматная доска использует jquery, поэтому, если скрипт шахматной доски загружается / запускается первым, он падает, потому что не находит jquery.

Сценарий внизу также не будет работать, так как он может работать до загрузки jQuery.

Наконец, вы дважды включили сценарий шахматной доски в `head.

Лучшее решение для вашего случая - переместить сценарии внизу body, прямо над встроенным сценарием и удалить из них атрибут async.