jquery doesn't fire but returns text

Question

I have an application rendered with a layout. One menu item is created with

                %li.nav-item
                  = link_to bands_path, :class => "nav-link", remote: true do
                    %span Bands

The routes is

  resources :bands                  , defaults: { :format => "js"}, :remote => :true

when I click on the link, the following happens

Started GET "/bands" for ::1 at 2019-12-06 20:37:07 +0100
Processing by BandsController#index as JS
  Parameters: {"remote"=>:true}
  Rendering bands/index.js.erb
  Band Load (0.2ms)  SELECT "bands".* FROM "bands"
  ↳ app/views/bands/_index.html.haml:6
  Rendered collection of bands/_band.html.haml [7 times] (Duration: 2.1ms | Allocations: 989)
  Rendered bands/_index.html.haml (Duration: 9.6ms | Allocations: 4545)
  Rendered bands/index.js.erb (Duration: 16.2ms | Allocations: 9588)
Completed 200 OK in 19ms (Views: 16.2ms | ActiveRecord: 0.9ms | Allocations: 10624)

where bands/index.js.erb is

$("#main_left").html("<%= j render partial: 'index' %>");

Everything looks fine to me, but the final result is the following block (I added some newline) in a new page of the browser:

$("#main_left").html("<h5>Listing bands<\/h5>\n<table id=\'bands\'>\n<thead><\/thead>\n<tbody>\n<tr>\n<td>The Beatles<\/td>\n
<td><a href=\"/bands/1\">Show<\/a><\/td>\n<td><a href=\"/bands/1/edit\">Edit<\/a><\/td>\n<td><a data-confirm=\"Are you sure?\" rel=\"nofollow\" data-method=\"delete\" href=\"/bands/1\">Destroy<\/a><\/td>\n<\/tr>\n<tr>\n
<td>Pink Floyd<\/td>\n<td><a href=\"/bands/2\">Show<\/a><\/td>\n<td><a href=\"/bands/2/edit\">Edit<\/a><\/td>\n<td><a data-confirm=\"Are you sure?\" rel=\"nofollow\" data-method=\"delete\" href=\"/bands/2\">Destroy<\/a><\/td>\n
<\/tr>
<\/tbody>\n
<\/table>");

Any idea why jquery didn't substitute the #main_left id?