부트 스트랩 3을 사용하여 레일스 부분에 Popover를 구현하는 방법은 무엇입니까?

Question

현재 Rails 4 애플리케이션에 부트 스트랩 2 (gem twitter-bootstrap-rails 2.2.8)가 실행 중입니다. 링크를 클릭 할 때지도가 표시되는 부분을 사용하여 팝업을 구현하는 데 성공했습니다. 여기에 내가 가진 코드가 있습니다.

는 application.js

//= require jquery 
//= require jquery_ujs 
//= require twitter/bootstrap 
//= require_tree . 

bootstrap.js.coffee

jQuery -> 
    $(".popover-map").popover({ html : true }) 

_MAP

<div class="row-fluid"> 
    <div class="span4" align="center" id="text-bold"><%= link_to("#{t :map_marfa_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_marfa_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_marfa'}") %></div> 
    <div class="span4" align="center" id="text-85"><%= "#{t :map_msg_click}" %></div> 
    <div class="span4" align="center" id="text-bold"><%= link_to("#{t :map_bigbend_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_bigbend_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_bigbend'}") %></div> 
</div> 

_map_marfa

<p align="center"><%= image_tag("map-marfa.jpg", alt: "#{t :map_marfa_head}") %></p> 

_map_bigbend

<p align="center"><%= image_tag("map-bigbend.jpg", alt: "#{t :map_bigbend_head}") %></p> 

나는 아래의지도 표시를 링크 중 하나를 클릭 한 사람이지도를 닫으려면 링크를 클릭 할 때까지이 유지합니다. 새로운 Rails 5 Bootstrap 3 응용 프로그램에 코드를 복사했습니다. 다음은 부트 스트랩 3.

에 대한 코드 변경 application.js 있습니다

//= require bootstrap-sprockets 

bootstrap.js.coffee 지금

<div class="row"> 
    <div class="col-md-4" align="center" id="text-bold"><%= link_to("#{t :map_marfa_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_marfa_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_marfa'}") %></div> 
    <div class="col-md-4" align="center" id="text-85"><%= "#{t :map_msg_click}" %></div> 
    <div class="col-md-4" align="center" id="text-bold"><%= link_to("#{t :map_bigbend_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_bigbend_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_bigbend'}") %></div> 
</div> 

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require_tree . 
//= require bootstrap-sprockets 

_MAP

을 bootstrap.coffee로 변경되었다 링크를 클릭하면 링크가 클릭 될 때까지지도가 표시되고 즉시 사라집니다.

Answer 1

나는 계속 이것을보고 깨달았다. application.js 나는 터보 링크가 필요했다. 어떤 이유로 든 나는하려고하는 것을 엉망으로 만듭니다. //= require turbolinks을 삭제하고 스크립트가 다시 작동합니다. 그림을 이동.