Rails仅在重新加载页面后加载我的javascript

我在Rails中有一个问题，当我进入页面时，我的javascript没有加载。我必须在输入后重新加载页面，然后才加载

以下是我的javascript文件的外观：

$(function() {
    initPage();
});
$(window).bind('page:change', function() {
    initPage();
});
function initPage() {
    window.onload = function () {
    var div = document.getElementById("buttons");
    var btn1 = document.createElement("button"); btn1.innerHTML = "Add one calculator"; btn1.id = "one";
    div.appendChild(btn1);
    btn1.onclick = function () {make_buttons ('calc');};
};

function make_buttons (id) {
    var div_id = Math.floor(Math.random()*999);
    var input_id = Math.floor(Math.random()*999);
    var operators = ["*","/","+","-","=","c","DEL"];
    var parent = document.getElementById(id);
    var in_div = document.createElement("div"); in_div.id = div_id;
    parent.appendChild(in_div);
        var input = document.createElement("input"); input.type = 'text'; input.id = input_id; input.readOnly=true;
        in_div.appendChild(input);
        for (var i = 0;i < 10; i++){  // make buttons with numbers
            var btn = document.createElement ("button");
            if (i === 0 || i === 6) {
                var br = document.createElement("br");
                in_div.appendChild(br);
            }
            btn.innerHTML = i;
            btn.id = i;
            in_div.appendChild(btn);
            (function(index) {btn.onclick = function() {document.getElementById(input_id).value += index;};})(i);
        }
    for (var j = 0; j < operators.length; j++) {   // make buttons with operators
        var btn = document.createElement ("button");
        btn.innerHTML = operators[j];
        btn.id = operators[j];
        in_div.appendChild(btn);
        if (operators[j] === "=") {
            btn.onclick = function () {document.getElementById(input_id).value = eval(document.getElementById (input_id).value);};
        }
        else if (operators[j] === "c") {
            btn.onclick = function () {document.getElementById(input_id).value = '';};
        }
        else if (operators[j] === "DEL") {
            btn.onclick = function () {clearBox(div_id);};
        }
        else {
            (function(index) {btn.onclick = function() {document.getElementById(input_id).value += index;};})(operators[j]);
        }   
    };
};

function clearBox(elementID) // delete the selected instance of calc
{
    document.getElementById(elementID).innerHTML='';    
}  
}

$（函数（）{
initPage（）；
});
$（窗口）.bind（'page:change'，function（）{
initPage（）；
});
函数initPage（）{
window.onload=函数（）{
var div=document.getElementById（“按钮”）；
var btn1=document.createElement（“按钮”）；btn1.innerHTML=“添加一个计算器”；btn1.id=“一个”；
儿童分部（btn1）；
btn1.onclick=function（）{make_按钮（'calc'）；}；
};
功能生成按钮（id）{
var div_id=Math.floor（Math.random（）*999）；
var input_id=Math.floor（Math.random（）*999）；
var运算符=[“*”、“/”、“+”、“-”、“=”、“c”、“DEL”]；
var parent=document.getElementById（id）；
变量in_div=document.createElement（“div”）；in_div.id=div\u id；
父.子（在_div中）；
var input=document.createElement（“输入”）；input.type='text'；input.id=input\u id；input.readOnly=true；
in_div.appendChild（输入）；
对于（var i=0；i<10；i++）{//使用数字制作按钮
var btn=document.createElement（“按钮”）；
如果（i==0 | | i==6）{
var br=document.createElement（“br”）；
附属儿童部（br）；
}
btn.innerHTML=i；
btn.id=i；
附属儿童（btn）；
（函数（索引）{btn.onclick=function（）{document.getElementById（input_id）.value+=index；}；}）（i）；
}
对于（var j=0；j

我还在Rails中使用turbolinks函数。这里可能有什么问题

新代码

$(document).ready(function() {initPage();});
window.on('page:change', function(){initPage();});
/*
$(function() {
    initPage();
});
$(window).bind('page:change', function() {
    initPage();
});
*/
function initPage() {
        var div = document.getElementById("buttons");
        var btn1 = document.createElement("button"); btn1.innerHTML = "Add one calculator"; btn1.id = "one";
        div.appendChild(btn1);
        btn1.onclick = function () {make_buttons ('calc');};
}
function make_buttons (id) {
    var div_id = Math.floor(Math.random()*999);
    var input_id = Math.floor(Math.random()*999);
    var operators = ["*","/","+","-","=","c","DEL"];
    var parent = document.getElementById(id);
    var in_div = document.createElement("div"); in_div.id = div_id;
    parent.appendChild(in_div);
        var input = document.createElement("input"); input.type = 'text'; input.id = input_id; input.readOnly=true;
        in_div.appendChild(input);
        for (var i = 0;i < 10; i++){  // make buttons with numbers
            var btn = document.createElement ("button");
            if (i === 0 || i === 6) {
                var br = document.createElement("br");
                in_div.appendChild(br);
            }
            btn.innerHTML = i;
            btn.id = i;
            in_div.appendChild(btn);
            (function(index) {btn.onclick = function() {document.getElementById(input_id).value += index;};})(i);
        }
    for (var j = 0; j < operators.length; j++) {   // make buttons with operators
        var btn = document.createElement ("button");
        btn.innerHTML = operators[j];
        btn.id = operators[j];
        in_div.appendChild(btn);
        if (operators[j] === "=") {
            btn.onclick = function () {document.getElementById(input_id).value = eval(document.getElementById (input_id).value);};
        }
        else if (operators[j] === "c") {
            btn.onclick = function () {document.getElementById(input_id).value = '';};
        }
        else if (operators[j] === "DEL") {
            btn.onclick = function () {clearBox(div_id);};
        }
        else {
            (function(index) {btn.onclick = function() {document.getElementById(input_id).value += index;};})(operators[j]);
        }   
    };
};

function clearBox(elementID) // delete the selected instance of calc
{
    document.getElementById(elementID).innerHTML='';    
}  

$（document）.ready（函数（）{initPage（）；}）；
on（'page:change'，function（）{initPage（）；}）；
/*
$（函数（）{
initPage（）；
});
$（窗口）.bind（'page:change'，function（）{
initPage（）；
});
*/
函数initPage（）{
var div=document.getElementById（“按钮”）；
var btn1=document.createElement（“按钮”）；btn1.innerHTML=“添加一个计算器”；btn1.id=“一个”；
儿童分部（btn1）；
btn1.onclick=function（）{make_按钮（'calc'）；}；
}
功能生成按钮（id）{
var div_id=Math.floor（Math.random（）*999）；
var input_id=Math.floor（Math.random（）*999）；
var运算符=[“*”、“/”、“+”、“-”、“=”、“c”、“DEL”]；
var parent=document.getElementById（id）；
变量in_div=document.createElement（“div”）；in_div.id=div\u id；
父.子（在_div中）；
var input=document.createElement（“输入”）；input.type='text'；input.id=input\u id；input.readOnly=true；
in_div.appendChild（输入）；
对于（var i=0；i<10；i++）{//使用数字制作按钮
var btn=document.createElement（“按钮”）；
如果（i==0 | | i==6）{
var br=document.createElement（“br”）；
附属儿童部（br）；
}
btn.innerHTML=i；
btn.id=i；
附属儿童（btn）；
（函数（索引）{btn.onclick=function（）{document.getElementById（input_id）.value+=index；}；}）（i）；
}
对于（var j=0；j

您有

窗口。在
initPage（）函数中onload

onload
事件将在上载页面加载后触发，但在
page:change
事件之后不会再次触发。因此
onload
块中的代码在页面更改后将永远不会有机会执行

要修复此问题，请从函数
initPage（）
中删除
onload
逻辑。然后，在
onload
和
page:change
事件上调用
initPage（）。。因此，我从initPage中取出整个onload块，并将该函数留空。然后在调用c initPage（）的第一行，我告诉它加载页面：change和onload？但是我怎么告诉它这样做呢？我移除了window.onload，并将其中的内容放到initPage中。现在，当加载第一页的页面时