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屋!