rails上的bootstrap modal ruby​​显示了几个模态

Question

我有RoR项目，我的erb视图中有2个引导模式。

<%= render 'info' %>
<%= render 'info2' %>

_info.html.erb：

<button class="btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#myModal">Info</button>
        <div id="myModal" class="modal fade" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
                <h4 class="modal-title">Contract 1</h4>
              </div>
              <div class="modal-body">
                ...
              </div>

              <div class="modal-footer">
                <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>

_info2.html.erb：

        <div id="myModal2" class="modal fade" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
                <h4 class="modal-title">Contract 1</h4>
              </div>
              <div class="modal-body">
                ...
              </div>

              <div class="modal-footer">
                <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>

我有item.js：

$('#myModal').on('hidden.bs.modal', function (e) {
    $('#myModal2').modal('show');
})

和application.js：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require cocoon
//= require angular
//= require turbolinks
//= require_tree .

当我通过链接打开页面并按下按钮显示信息时，它有时不起作用，只是没有模态的停电。但它经常是正确的。 但是当我按F5刷新页面时，按下信息按钮时总是会显示第一个模态。 请帮我解决这个魔法。