导航到页面时 HTML 元素消失，页面刷新时重新出现

Question

在我的框架中使用 Ruby on Rails。我已经编写了代码来创建棋盘。当我第一次导航到包含附加元素的 div 页面时，我由 JavaScript 创建的 HTML 元素消失了。棋盘在一瞬间可见，然后在第一次导航到页面时消失，但刷新会使棋盘出现并停留。这是我的 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>

想弄清楚为什么棋盘在初始页面加载时不会保持呈现状态，但会在刷新时保持状态。

Answer 1

听起来像 Turbolinks 导致了这种情况，而不是执行$(function() { .. }相当于$(document).ready(function() { .. })(L1) 的操作，您应该执行以下操作：$(document).on('turbolinks:load', function() {&nbsp; // your code here})这是 Turbolinks 存储库供您参考：https : //github.com/turbolinks/turbolinksL1: $(function() {} ); 做？