Rails只在页面重新加载后加载我的javascript [英] Rails loading my javascript only after a page reload

问题描述

我在Rails中遇到这个问题，当我进入页面时，我的javascript未加载。我必须在输入后重新加载页面，然后加载它。

I have this problem in Rails that when I enter the page, my javascript is not loaded. I have to reload the page after entering it and only then it loads.

这是我的javascript文件的样子：

This is how my javascript file looks like:

$(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='';    
}  
}

此外，我在Rails中使用turbolinks函数。这可能是什么问题？

Also I am using the turbolinks function in Rails. What might be the problem here?

新代码;

$(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='';    
}  

推荐答案

你有 window.onload 在 initPage（）函数内。

onload 事件将被触发上传页面加载，但在页面后不会再次触发：更改事件。因此，在页面更改后， onload 块中的代码将永远不会被执行。

onload event will be fired upload page loaded, but won't be fired again after page:change event. So the code inside onload block will never have chance to be executed after page changed.

要修复，请删除 onload 来自函数 initPage（）的逻辑。然后，在 onload 和页面上调用 initPage（）：更改事件。

To fix, remove onload logic from the function initPage(). Then, call initPage() on both onload and page:change event.

这篇关于Rails只在页面重新加载后加载我的javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！