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

我也在使用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=''; } 

Answer 1

你在initPage()函数中有window.onload 。

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

要修复，请从函数initPage()删除onload逻辑。 然后，在onload和page:change事件上调用initPage() 。