Jquery和Font-awesome。如何将单击事件绑定到图标

Question

以下是我的index.html.erb视图中的代码：

<script charset="utf-8">
  $(".fa-filter").on("click", function() {
    $("#visible-filters").animate({width: "toggle"}, 1000);
  });
</script>

<div class="container">
  <i class="fa fa-filter fa-4x"></i>
  <%= render partial: "shared/trip_filters" %>
</div>

我的过滤器是：

<div id= "visible-filters" class="trip-filters">
  <p> Trip Categories </p>
  <% @categories.each do |category| %>
    <% if params[:category] == category.name.parameterize %>
      <%= check_box :category, category.name.parameterize, {checked: true} %> <%= category.name %><br/>
    <% else %>
      <%= check_box :category, category.name.parameterize %> <%= category.name %><br/>
    <% end %>
  <% end %>
  <br/>
</div>

目前，当我点击过滤器font-awesome图标时，没有任何反应。我能做什么？我错过了什么？