Rails加載我的JavaScript後，頁面重新加載

Question

我在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

你有window.onload的initPage()函數內。

onload事件將被觸發上傳頁面加載，但在page:change事件後不會再被觸發。因此onload塊內的代碼永遠不會有機會在頁面更改後執行。

要修復，請從initPage()功能中刪除onload邏輯。然後，在onload和page:change事件上撥打initPage()。