Javascript/JQuery 无法在我的 Rails 应用程序中运行

Question

我已经尝试了很长时间，这就是问题:

我有一个带有文本框的 View ，为了检查我的 JQuery 是否正常工作，我要做的就是在该文本框的值长于 0 时显示一条警报消息。这是我目前得到的:

registers/registration.html.erb

<script>
    $('input[name="Card_ID"]').keyup(function(){
        if (this.value.length > 0) {
            alert("TEST");}
    });
</script>

<table border="1">
  <%= text_field_tag 'Card_ID',nil,  :autofocus => true %>
  <tr><td>Present</td>
    <td>University ID</td>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Time of Arrival</td>
  </tr>
  <tr>
  <% @studentregister.each do |t| %>
<%= simple_form_for t do |streg| %>
      <td><div class="present"><%= streg.check_box :present, :onChange => "submit()"%></div>
        <%= streg.submit :style => 'display: none' %></td>
            <td><%= streg.label Student.find(t.student_id).university_id %></td>
            <td><%= streg.label Student.find(t.student_id).first_name %></td>
            <td><%= streg.label Student.find(t.student_id).last_name %></td>
            <% if t.time_of_arrival %>
            <td><%= streg.label t.time_of_arrival.strftime('%H:%M:%S%P')%></td>
                <% else %>
            <td><%= streg.label " "%></td>
                <% end %>
             </tr>
    <% end %>
    <% end %>
</table>

出于测试目的，我还将相同的代码(在 CoffeeScript 中)放入相关的 JS.COFFEE 文件中以查看其是否有效:

registers.js.coffee

$("input[type=text]").keyup ->
  alert "TEST"  if @value.length > 0

但是不，它仍然不起作用。只有这段代码不起作用，因为当我尝试在页面加载时显示 alert "Test" 或 alert("Test") 时，它起作用了。

有什么想法吗？

编辑:添加了一些 HTML 源代码来显示它的外观，并查看 HTML 元素:

  <div id="main" role="main">
      <div class="container">
        <div class="content">
           <div class="row">
            <div class="span12">

              <script>
    $('input[name="Card_ID"]').keyup(function(){
        if (this.value.length > 0) {
            alert("TEST");}
    });
</script>

<table border="1">
  <input autofocus="autofocus" id="Card_ID" name="Card_ID" type="text" />
      <tr><td>Present</td>
        <td>University ID</td>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Time of Arrival</td>
      </tr>
  <tr>
<form accept-charset="UTF-8" action="/student_registers/9" class="simple_form edit_student_register" id="edit_student_register_9" method="post" novalidate="novalidate">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" />
<input name="_method" type="hidden" value="put" />
<input name="authenticity_token"   type="hidden" value="c8B0JGs4ZLVILa4a4r4PJJrD/zFcLCDhTLscBKHbFeE=" /></div>
      <td><div class="present">
<input name="student_register[present]" type="hidden" value="0" />
<input checked="checked" id="student_register_present" name="student_register[present]" onChange="submit()" type="checkbox" value="1" /></div>
        <input name="commit" style="display: none" type="submit" value="Update Student register" /></td>
            <td><label class="string optional control-label" for="student_register_w122344112">W122344112</label></td>
            <td><label class="string optional control-label" for="student_register_Daniel">Daniel</label></td>
            <td><label class="string optional control-label" for="student_register_Smith">Smith</label></td>
            <td><label class="string optional control-label" for="student_register_ "> </label></td>
             </tr>

Answer 1

这看起来像是 jQuery 的工作 ready()功能。尝试将 JavaScript(来自上面的代码)放入以下代码行 $(function() { ... });

像这样:

$(function() {
    $('input[name="Card_ID"]').keyup(function(){
        if (this.value.length > 0) {
            alert("TEST");
        }
    });
});

通过这样做，jQuery ready() 函数(至少) 使 DOM 有机会在运行(或准备使用) 页面上的 JavaScript。