Javascript正在页面加载之前运行。

Question

我正在尝试使用javascript查找表单，以了解是否运行脚本。 这是我的代码：

var planSelectionForm = {
  pages: ["#selection", "#payment"],

  init: function(form) {
    // Don't initialize if the page does not have a new payment form
    if (form.length === 0) {
      return;
    }

    var _ = this;

    $(window).on("hashchange", function() {
      if (_.pages.indexOf(window.location.hash) >= 0) {
        _.show(window.location.hash);
      }
    });

    window.location.hash = _.pages[0];
  },

  show: function(section) {
    section = section.replace("#", "");
    if (section === "") {
      section = "selection";
    }
  },
};

// Make the script work on the plan form
planSelectionForm.init($("form#new_account"));

我正在尝试从初始化程序中的页面加载表单。 但是它总是告诉我表单不在页面上。 这是正确的，因为javascript在页面加载之前正在运行。 我认为这与turbolinks有关，但是我不确定吗？ 如果有人有很棒的主意：这是我的application.js

Application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require tooltip.min
//= require pickadate/picker
//= require pickadate/picker.date
//= require pickadate/picker.time
//= require simplemde
//= require_tree .

Answer 1

您需要换行：

planSelectionForm.init($("form#new_account"));

在turbolinks：load事件中：

$(document).on('turbolinks:load', function() {
   lanSelectionForm.init($("form#new_account"));
});

Answer 2

如果要包括使用简单script标记发布的代码，则必须确保仅在页面完全加载后才运行。 使用jQuery，您可以通过调用sth来实现。 像$(window).on("load", function() {...YOURCODEHERE...}) 。 在此处查看有关此内容的更多信息： https : //learn.jquery.com/using-jquery-core/document-ready/