带导轨的DOMContentLoaded处理程序5

Question

我正在使用rails 5，并试图在assets/javascript文件夹下的.js文件中实现以下内容。但由于某种原因，它根本不工作。我有点猜测内容需要用DOMContentLoaded处理程序包装，但不知道如何去做。

关于如何将该文件的javacontent包装在DOMContentLoaded处理程序中的任何想法？

var x = document.getElementById("demo"); 

function getLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition); 
    } else { 
     x.innerHTML = "Geolocation is not supported by this browser."; 
    } 
} 

function showPosition(position) { 
    x.innerHTML = "Latitude: " + position.coords.latitude + 
     "<br>Longitude: " + position.coords.longitude; 
} 

的application.js

//= require rails-ujs 
//=require jquery 
//=require jquery_ujs 
//=require jquery.turbolinks 
//=require turbolinks-compatibility 
//=require turbolinks 
//= require underscore 
//= require gmaps/google 
//= require_tree . 

Answer 1

document.addEventListener("DOMContentLoaded", function(event) { 
    var x = document.getElementById("demo"); 

    function getLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition); 
    } else { 
     x.innerHTML = "Geolocation is not supported by this browser."; 
    } 
    } 

    function showPosition(position) { 
    x.innerHTML = "Latitude: " + position.coords.latitude + 
     "<br>Longitude: " + position.coords.longitude; 
    } 
}); 

尽管使用一个跨浏览器兼容的解决方案，如可能jQuery.ready谨慎。

此外，当turbolinks替换页面内容，如果你使用的是你应该挂钩turbolinks到其"turbolinks:load"事件，而不是（在 塞巴斯蒂安Palma's答案）作为DOMContentLoaded不被解雇。