Radio buttons generated with rails radio_button not changing when clicked

Question

I have the following code in categories.html.erb:

<%= form_for(@marker) do |f| %>
  <div> <%= f.radio_button("category", "1") %><label>Category 1</label> </div>
  <div> <%= f.radio_button("category", "2") %><label>Category 2</label> </div>
  <div> <%= f.radio_button("category", "3") %><label>Category 3</label> </div>
<% end %>

and the following javascript code in categories.js:

var update = function() {
  return console.log("Category Selected");
};

$("input[type='radio']").change(update);

The radio buttons never seem to get changed (nothing shows on my console log when I click a radio button).

What I originally want to do is to have a subcategory div inside every category one that will only show when the respective radio button is selected (and hide when another button is clicked).

UPDATE: I got this working with the following code:

$(document).ready(function(){
    $("input[type=radio]").change(function(){
      $(".subcategory").hide();
      $("#" + $(this).val()).show();
    });
});

Not sure why I had to put the code inside .ready though, to be honest. :$

Answer 1

I got this working with the following code:

$(document).ready(function(){
  $("input[type=radio]").change(function(){
    $(".subcategory").hide();
    $("#" + $(this).val()).show();
  });
});