1

我已经尝试了这么久，这是一个问题：

我有一个带有文本框的视图，为了检查我的 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>
4

1 回答 1

1

这看起来像是 jQueryready()函数的工作。尝试将 JavaScript（来自您上面的代码）放在以下代码行中$(function() { ... });

像这样：

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

通过这样做，jQueryready()函数（至少）让 DOM 有机会在页面上运行（或准备使用）JavaScript 之前加载并准备好。

于 2013-03-18T21:38:05.483 回答