Question

我有一个带表单的静态页面。现在，所有表单应该显示的是当用户单击按钮时显示“已完成”的弹出警报。它只是一个普通的页面，但在rails中不起作用。我检查了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>

以下是按下提交按钮时的动作：

(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文件中。这是我的application.js文件：

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

我也禁用了turbo链接，所以我知道这不是问题。如何让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，则需要在bundle exec rake assets:precompile命令之前运行git add。

Answer 3

您是否确定在侦听器尝试附加时已加载DOM？

你的functions.js文件应该具有如下所示的点击功能：

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

静态页面javascript正常工作但不在rails中

3 个答案: