Jquery 单击关闭时引导模式未关闭

我有一个类似Instagram页面布局的书籍网格。此网格中的每个单元格都链接到一个模式，该模式打开时会显示来自服务器的信息。模式按预期打开，但未按预期关闭

也就是说，仅当用户在模式内单击时模式才会关闭，但是，当用户单击内部按钮（即“关闭”）时模式不会关闭

当我将

link\u更改为
按钮时，它确实可以正确打开和关闭。关于如何在仍然使用
link\u to
rails方法的情况下正确修复此问题，有何建议

  <ul id="book-list">    
      <% @books.each do |book| %>
        <%= link_to "#book-modal-#{book.id}" , data: { toggle: "modal" }  do %>
          <li id="book">
            <%= image_tag book.image_url, id: "book-image" %>

            <div id="book-modal-<%= book.id%>" class="modal fade" role="dialog">
              <div class="modal-dialog">
                <div class="modal-content">

                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><%= book.title %></h4>
                  </div>

                  <div class="modal-body">
                    <p><%= book.id%></p>
                  </div>
                </div>
              </div>
            </div>

            <!-- Preview -->
            <div id="book-preview">
              <div class="row">
                <div class="col-12-sm text-center" id="book-preview-detail">
                  <h3><%= book.title %></h3>
                  <h4><%= book.price %></h4>
                </div>
              </div>
            </div>

          </li>
        <% end %>
      <% end %>
  </ul>



&时代；



尝试将您的咖啡脚本降级到1.8，我以前遇到过关于链接到和按钮到的问题

gem 'coffee-script-source', '~> 1.8.0'
and `run bundle install or update`

呈现的HTML是什么样子的？请看这里的屏幕截图：我们需要看到的是HTML的底层，而不是页面本身。请看指向要点的链接：我找到了！链接_to正在链接到模态本身，因此，当单击关闭按钮时，该元素将再次打开。啊，递归。