HTML页面function仅在页面刷新时完全起作用，但不能通过任何链接完成

我的一个RoR应用程序页面有一个有趣的问题，有点难以解释。

基本上，我有一个页面vendor.html.erb ，允许用户输入供应商的数据，包括根据所选国家和州显示的下拉列表选择他们的位置（国家，州，市）。 当我刷新网页时，这似乎工作得很好但是当我通过导航栏（_header.html.erb）访问页面时，下拉列表无法显示。 通过链接访问页面时，输入占位符也无法显示。

以下是我的/app/views/static_pages/vendor.html.erb

  .hidden { display: none; }       var data = { countries: [{ name: 'China', childs: [{ name: 'Beijing', childs: [{name: 'Beijing'}, {name: 'Dongcheng'}] }, { name: 'Tianjin', childs: [{name: 'Guangzhou'}, {name: 'Shanghai'}] }] }, { name: 'India', childs: [{ name: 'Uttar', childs: [{name: 'Kanpur'}, {name: 'Ghaziabad'}] }, { name: 'Maharashtra', childs: [{name: 'Mumbai'}, {name: 'Pune'}] }] }, { name: 'USA', childs: [{ name: 'Washington', childs: [{name: 'Washington'}, {name: 'Seatle'}] }, { name: 'Florida', childs: [{name: 'Orlando'}, {name: 'Miami'}] }] }] }; function buildSelect(name, data, childs) { var div = $('
'); div.addClass('hidden autoSelect ' + data.name + ' ' + name); var label = $(''); label.text(name); var select = $(''); var option = $(''); option.text('--'); select.append(option); data.childs.forEach(function (child) { option = $(''); option.val(child.name); option.text(child.name); select.append(option); }); if (childs) select.on('change', updateCities); label.append(select); div.append(label); $('.country').append(div); } function buildForms(data) { data.countries.forEach(function (country) { buildSelect('State', country, true); country.childs.forEach(function (state) { buildSelect('City', state); }); }); } function hideAutoSelect (name) { $('div.autoSelect.'+name).addClass('hidden'); } function updateStates() { var v = this.value; if (v) { hideAutoSelect('State'); hideAutoSelect('City'); var div = $('div.autoSelect.'+v); div.removeClass('hidden'); var select = $('select', div); if (select.val()) $('div.autoSelect.'+select.val()).removeClass('hidden'); } } function updateCities() { var v = $(this).val(); if (v) { hideAutoSelect('City'); $('div.autoSelect.'+v).removeClass('hidden'); } } $(document).on('ready',function () { buildForms(data); $('[name=country]').on('change', updateStates); });    
 
Add Vendor
 
 
  
 
 Create vendor ID*   
 
  
 
 Vendor name*   
 
  
  Vendor type*  --  
  
 Vendor origin*  -- China India USA   
 
 
 
  

以下是我的/app/views/layouts/_header.html.erb

        * { box-sizing: border-box; margin: 0; padding: 0; } html{ min-width: 100%; min-height: 100%; width: auto; height: auto; } body{ padding: 80px; } header { padding: 10px; top: 0px; left: 0px; margin: 0; background: #fff; min-width: 100%; z-index: 1; justify-content: center; position: fixed; display: flex; } .nav { background: #232323; height: 60px; *display:inline; *zoom:1; width: 60%; margin: 0; padding: 0; text-align: center; vertical-align: top; } .nav li { display: inline; float: left; list-style-type: none; position: relative; } .nav li a { font-size: 14px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid #2e2e2e; font-family: Arial; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } .nav li a:hover { background-color: #2e2e2e; } #search { width: 357px; margin: 4px; } #search_text{ width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Arial; border: 0 none; height: 52px; margin-right: 0; color: white; outline: none; background: #494949; float: left; box-sizing: border-box; transition: all 0.15s; } ::-webkit-input-placeholder { /* WebKit browsers */ color: white; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: white; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: white; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: white; } #search_text:focus { background: #5a5a5a; } #options a{ border-left: 0 none; } .subnav { visibility: hidden; position: absolute; top: 110%; right: 0; width: 200px; height: auto; opacity: 0; z-index: 1; transition: all 0.1s; background: #232323; } .subnav li { float: none; } .subnav li a { border-bottom: 1px solid #2e2e2e; } #options:hover .subnav { visibility: visible; top: 100%; opacity: 1; } button { display: inline-block; padding: 10px; }    
 
 
Home
  
  
 Add 
 
 
 
 
 
 
 
 
 
   
 
 
 
  

Answer 1

当你使用turbolinks时，你应该为turbolinks做好准备：加载。

 $(document).on('turbolinks:load', function() { buildForms(data); $('[name=country]').on('change', updateStates); }) 

Answer 2

根据此链接（ https://github.com/turbolinks/turbolinks#loading-your-applications-javascript-bundle ），您应该在文档的中使用元素。

另外你应该考虑在你的script元素中添加data-turbolinks-track="reload" https://github.com/turbolinks/turbolinks#reloading-when-assets-change