Javascript/JQuery не работает в моем приложении Rails

Question

я пытался так долго, это вопрос:

У меня есть вид с текстовым полем, и все, что я пытаюсь сделать в для того, чтобы проверить, если мой 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"), когда страница загружается, она работает.

Любые идеи?

EDIT: Добавлен некоторые 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 на вашей странице.