레일이 페이지를 다시로드 한 후에 만 ​​자바 스크립트를로드합니다.

Question

레일스에서이 페이지에 들어가면 자바 스크립트가로드되지 않는 문제가 있습니다. 페이지를 입력 한 후 페이지를 다시로드해야만로드됩니다.

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

이 또한 내가 레일의 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()으로 전화하십시오.