JQueryのイベントが発火しない

Question

前提・実現したいこと

投稿機能にancestryを用いたカテゴリー機能を実装
投稿に失敗し、カテゴリーを選び直したら以下のようなエラーが発生しました。

発生している問題・エラーメッセージ

カテゴリーを選び直したらJavaScriptが動きません。

Started GET "/recruitments/8/get_category_children?parent_id=1" for ::1 at 2021-11-22 12:44:45 +0900
  
ActionController::RoutingError (No route matches [GET] "/recruitments/8/get_category_children"):

該当のソースコード

window.addEventListener('DOMContentLoaded', function(){
  function appendOption(category){
    var html = `<option value="${category.id}">${category.name}</option>`;
    return html;
  }
  function appendChildrenBox(insertHTML){
    var childSelectHtml = "";
    childSelectHtml = `<div class="category__child" id="children_wrapper">
                        <select id="child__category" name="recruitment[category_id]" class="serect_field">
                          <option value="">---</option>
                          ${insertHTML}
                        </select>
                      </div>`;
    $('.append__category').append(childSelectHtml);
  }
  function appendGrandchildrenBox(insertHTML){
    var grandchildSelectHtml = "";
    grandchildSelectHtml = `<div class="category__child" id="grandchildren_wrapper">
                              <select id="grandchild__category" name="recruitment[category_id]" class="serect_field">
                                <option value="">---</option>
                                ${insertHTML}
                                </select>
                            </div>`;
    $('.append__category').append(grandchildSelectHtml);
  }

  $('#recruitment_category_id').on('change',function(){
    var parentId = document.getElementById('recruitment_category_id').value;
    if (parentId != ""){
      $.ajax({
        url: 'get_category_children',
        type: 'GET',
        data: { parent_id: parentId },
        dataType: 'json'
        // cache: false,
      })

      .done(function(children){
        $('#children_wrapper').remove();
        $('#grandchildren_wrapper').remove();
        var insertHTML = '';
        children.forEach(function(child){
          insertHTML += appendOption(child);
        });
        appendChildrenBox(insertHTML);
      })
      .fail(function(){
        alert('カテゴリー取得に失敗しました');
      })
    }else{
      $('#children_wrapper').remove();
      $('#grandchildren_wrapper').remove();
    }
  });

  $('.append__category').on('change','#child__category',function(){
    var childId = document.getElementById('child__category').value;
    if(childId != "" ){
      $.ajax({
        url: '/recruitments/get_category_grandchildren',
        type: 'GET',
        data: { child_id: childId },
        dataType: 'json'
        // cache: false,
      })
      .done(function(grandchildren){
        $('#grandchildren_wrapper').remove();
        var insertHTML = '';
        grandchildren.forEach(function(grandchild){
          insertHTML += appendOption(grandchild);
        });
        appendGrandchildrenBox(insertHTML);
      })
      .fail(function(){
        alert('カテゴリー取得に失敗しました');
      })
    }else{
      $('#grandchildren_wrapper').remove();
    }
  })
});

Rails.application.routes.draw do
  devise_for :users
  root to: "recruitments#index"
  resources :users 
  # resources :categories
  resources :recruitments do
    collection do
      get 'get_category_children', defaults: { format: 'json' }
      get 'get_category_grandchildren', defaults: { format: 'json' }
      get 'search'
      get 'post_done'
      get 'delete_done'
      get 'detail_search'
      get 'update_done'
    end
    resources :orders, only: [:index, :create]
  end
end

可読性向上のためコードの抜粋をしております。

class RecruitmentsController < ApplicationController
  before_action :authenticate_user!, only: [:new, :edit, :destroy]
  before_action :set_array, only: [:new, :create, :show, :edit]
  before_action :set_recruitment, only: [ :edit, :update, :show, :destroy]

  def index
    @recruitments = Recruitment.order("created_at DESC")
  end

  def new
    @recruitment = Recruitment.new
  end

  def create
    @recruitment = Recruitment.new(recruitment_params)
    if @recruitment.save
      redirect_to root_path(@recruitment)
    else
      render :new
    end
  end

  def get_category_children
    @category_children = Category.find("#{params[:parent_id]}").children
  end

  def get_category_grandchildren
    @category_grandchildren = Category.find("#{params[:child_id]}").children
  end

  private

  def recruitment_params
    params.require(:recruitment).permit(:heading, :content, :category_id, :price, :image).merge(user_id: current_user.id)
  end

  def set_array
    @category_parent_array = Category.where(ancestry: nil)
  end

  def set_recruitment
    @recruitment = Recruitment.find(params[:id])
  end
  
end

    <%# カテゴリー %>
    <div class="append__category">
      <div class="weight-bold-text">
      カテゴリー
       <span class="indispensable">必須</span>
      </div>
      <div class="fform_label">
        <div class="lavel_name ">
        <%= f.collection_select(:category_id, @category_parent_array, :id, :name, {include_blank: "選択してください"}, class:"select-box", id: "recruitment_category_id") %>
        </div>
      </div>
    </div>

試したこと

https://jisakupc-technical.info/programing/jquery/4110/

こちらの記事を見て、IEの設定を変えようと試みましたがwindowsしか対応していないのでしょうか？
設定方法がわからず断念しました。

補足情報（FW/ツールのバージョンなど）

railsのバージョン
Rails 6.0.4.1

gemのバージョン
3.0.3

Comments

[m.ts10806]

質問タグにRuby on Railsを追加してください。

[yuki0302]

かしこまりました

Answer 1

routingが定義されていないようです、routes.rbで定義してください。

ActionController::RoutingError (No route matches [GET] "/recruitments/8/get_category_children"):

Comments

[yuki0302]

menber do　
get 'get_category_children', defaults: { format: 'json' }
get 'get_category_grandchildren', defaults: { format: 'json' }
end
このようにrouting設定したらしっかり動きました！！ありがとうございます！！