Rails 3: не могу заставить этот jquery работать на моей форме

Question

Я нашел фрагмент кода jquery для обратного отсчета символов при вводе формы.Я попытался добавить его в мой файл application.js, но он не работает.Когда я набираю текстовую область, число 350 не меняется.

Я уже установил jquery-rails и использую <% = javascript_include_tag: all%>, так что это не должно быть проблемой.Вот что у меня в application.js

$('textarea').keyup(function(){
    ta = $(this);
    if(ta.val().length >= 350){
        ta.val( ta.val().substr(0, 350) );
    } else {
        $("#counter span").text(350-ta.val().length);
    }
});

setInterval('$("#counter span").text(350-ta.val().length);', 350);

На мой взгляд, у меня есть:

<%= form_for @post, :validate => true, :html => {:multipart => true} do |f| %>
  <%= render 'shared/error_messages', :object => f.object %>
    <div class="field">
      <%= f.label :title, 'Title:' %><br /> 
    <%= f.text_field :title %><br />
    <%= f.label :image, "Choose image"%><br />
    <%= image_tag(@post.image_url(:avatartiny).to_s) if @post.image? %>
    <%= f.file_field :image %>
    <%= f.hidden_field :image_cache %><br />
    <%= f.label :content %><br /> 
    <%= f.text_area :content %><br />
    <div id="counter"><span>350</span> characters remaining.</div>
   </div>
  <div class="actions">
    <%= f.submit "Submit" %>
  </div>
<% end %>

И в моем custom.css у меня есть:

textarea {
   width:400px;
   height:400px;
   border:1px solid #999;
   border-radius:3px;
   padding:7px;
}

#counter span { font-weight:700 }

Вот что говорит мой источник HTML:

    <form accept-charset="UTF-8" action="/posts" class="new_post" data-validate="true" 
enctype="multipart/form-data" id="new_post" method="post" novalidate="novalidate"><div 
style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input
 name="authenticity_token" type="hidden" value="V6J0VERvuoKvQ5kXXgBuU5aC6VsKQ7W6RF30IKy9D7E="/></div>

<div class="field">
      <label for="post_title">Title:</label><br /> 
<input data-validate="true" id="post_title" name="post[title]" size="30" type="text" /><br />
<label for="post_image">Choose image</label><br />

<input data-validate="true" id="post_image" name="post[image]" type="file" />
<input id="post_image_cache" name="post[image_cache]" type="hidden" /><br />
<label for="post_content">Content</label><br /> 
<textarea cols="40" id="post_content" name="post[content]" rows="20"></textarea><br />
<div id="counter"><span>350</span> characters remaining.</div>
</div>

Answer 1

Нет ничего плохого в вашем javascript , поэтому, возможно, попробуйте поместить ваш код в блок

$(document).ready(function(){

});

.

Answer 2

Оберните свою текстовую привязку в документе. Уже обязательная:

$(function() {
    $('textarea').keyup(function(){
        ta = $(this);
        if(ta.val().length >= 350){
            ta.val( ta.val().substr(0, 350) );
        } else {
            $("#counter span").text(350-ta.val().length);
        }
    }); 
});

Это работает?