Элементы HTML исчезают при переходе на страницу, вновь появляются при обновлении страницы - PullRequest
0 голосов
/ 10 ноября 2019

Использование Ruby on Rails для моей платформы. Я написал код для создания шахматной доски. Мои HTML-элементы, которые я создал с помощью JavaScript, исчезают, когда я впервые перехожу на страницу с содержащим div, к которому у меня есть добавляемые элементы. Шахматная доска видна на долю секунды и затем исчезает при первой навигации по странице, но при обновлении шахматная доска появляется и остается. Это мой файл JavaScript:

    $(function() {
      var $boardContainer = document.querySelector('.board-container'); //grabs the div added to the index page -JB
      var $table = document.createElement("table"); 

      function buildBoard() {

        for (var i = 0; i < 8; i++) {   
            var $tr = document.createElement('tr');
            for (var n = 0; n < 8; n++) {
                var $td = document.createElement('td');
                $td.setAttribute('data-coord', i+','+n) //grabs the row iterator (i) and the cell iterator (n) and uses them for the coords! -JB
                if (i%2 == n%2) {           //every even square is white, odd is black -JB
                    $td.className = "white";
                } else {
                    $td.className = "black";
                }
                $tr.appendChild($td);
            }
            $table.appendChild($tr);
        }
        $boardContainer.appendChild($table);
      }
      buildBoard();
    });

И к этому элементу добавляются элементы:

<%= link_to 'Home', root_path, class: 'btn btn-primary'%>

<div class="board-container d-flex justify-content-center">



</div>

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

1 Ответ

1 голос
/ 13 ноября 2019

Похоже, что Turbolinks вызывает это, вместо того, чтобы делать $(function() { .. }, что эквивалентно $(document).ready(function() { .. }) (L1), вы должны сделать:

$(document).on('turbolinks:load', function() {

  // your code here

})

Вот репозиторий Turbolinks для вашей справки: https://github.com/turbolinks/turbolinks

L1: Что означает $ (function () {});делать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...