jquery没有'；t激发但返回文本

我有一个带有布局的应用程序。 使用创建一个菜单项

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

路线是

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

当我点击链接时，会发生以下情况

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)

其中bands/index.js.erb是

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

$（“#main_left”）.html（“”）；

我觉得一切都很好，但最终的结果是在浏览器的新页面中出现以下块（我添加了一些换行符）：

$("#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>");

$（“#main_left”）.html（“列出乐队\n\n\n\n披头士乐队\n
显示\n编辑\n存储\n\n\n
Pink Floyd\n显示\nEdit\n存储\n
\n
");

知道jquery为什么不替换#main#left id吗