静态页面JavaScript可以正常工作，但在Rails中不起作用

Question

我有一个带有表单的静态页面。 现在，表单应该做的只是显示一个弹出警报，当用户单击按钮时显示"完成"。 它只是作为一个普通页面工作，但在轨道中不起作用。 我检查了rails页面代码，javascript文件正在发送给用户。 rails 应用程序的所有代码都与静态页面相同。 这是表单代码：

<form action="#" id="sign-up-now" name="_register">
    <div class="form-header clearfix">
        <h4>Sign Up Now as a:</h4>
        <label for="Freelancer">
            Freelancer
            <input type="radio" name="Freelancer" class="radio" id="freelancer" />
        </label>
        <label for="Employer">
            Employer
            <input type="radio" name="Freelancer" class="radio" id="employer" />
        </label>
    </div>
    <div class="form-content">
        <input type="text" id="user-mail" name="email" class="field" value="Type Your Email Address Here" title="Type Your Email Address Here" />
        <input type="submit" class="button button-signup" id="signup-home" value="SIGN UP!" />  
    </div>
</form>

以下是按下提交按钮时起作用的 javascript：

(function($){
    $(document).on('ready', function(){
        $('#signup-home').on('click', function(){ //signup-home is the id of the submit button
            alert('done');
        return false; 
        });
    });
})(jQuery);

我知道rails

视图可以看到javascript，因为这是rails应用程序页面源代码的摘录：

<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/jquery.ui.core.js?body=1"></script>
<script src="/assets/functions.js?body=1"></script>

上面的javascript在functions.js文件中。 这是我的应用程序.js文件：

//= require jquery
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require users
//= require_tree .
//= require chosen-jquery
//= require cocoon

我还禁用了涡轮链接，所以我知道这不是问题。 如何让 JavaScript 工作？

Answer 1

这些

将被加载到文档的头部，你的JS将执行，尝试找到任何带有ID signup-home的东西，然后失败（因为它在DOM中还不存在）

如果您在页面加载后执行 JS，它应该可以工作

$(function(){
  $('#signup-home').on('click', function(){ //signup-home is the id of the submit button
    alert('done');
    return false; 
  });
});

Answer 2

我假设您尝试运行的 javascript 在您的users.js文件中......如果是这样，有几件事可能会导致这种情况。我相信//= require_tree .行应该在你的application.js文件的底部。因此，在您的情况下，请尝试将application.js文件更改为：

//= require jquery
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require users
//= require chosen-jquery
//= require cocoon
//= require_tree .

这也可能是预编译问题...首先尝试删除public/assets目录中的所有内容。这将强制 rails 使用管道，而不是任何预编译的样式表或 javascript。如果要部署到 heroku，则需要在git add命令之前运行bundle exec rake assets:precompile。

Answer 3

你确定在侦听器尝试附加时加载了你的 DOM 吗？

您的函数.js文件应该具有如下所示的单击函数：

jQuery(function() {
  $('#signup-home').on('click', function(){ //signup-home is the id of the submit button
    alert('done');
    return false; 
  });
});