Javascript can't see an object id

I want to perform some actions over my objects via Javascript, but I don't get why my script isn't binding objects. Any suggestions?

My _index.html file:

<table>
  <% @tasks.each do |task| %>
    <tr class='tasks' id="task_<%= task.id %>">

      <td>
        <input type="checkbox" class='check' data-id="<%= task.id %>" >
      </td>

    </tr>
  <% end %>
</table>

Here's the script in application.js:

$(document).on('ready page:load', function () {
    $('.check').on('change', function(){
    if ($(this).is(':checked')) {
    id = $(this).attr('data-id');
    $("task_<%= task.id %>").fadeOut();
    }
  });
})

It does nothing. However, when I go with $(.tasks) all of objects fade out along.