BootstrapX popover and close button

Question

Twitter Bootstrap v2.1.1을 기반으로하는 템플릿으로 Joomla 2.5 사이트를 개발 중입니다.

또한 마우스 오버 또는 포커스 대신 요소 클릭으로 팝업을 열거 나 닫을 수 있도록 BootstrapX - 클릭 오버, 부트 스트랩 확장을 사용하고 있습니다 : https://github.com/lecar-red/bootstrapx-clickover.

popover에서 간단한 AJAX 통화 변환기를 사용하여 HTML 파일을 호출합니다.

<p>V okence vpišite znesek v britanskih funtih, ki ga želite preračunati v eure.</p> 
<div id="currencyBox"> 
    <div class="currencyInner"> 
     <div class="data"> 
      <input type="text" name="znesek" id="znesek" value="1" /><span id="gbpsign">&pound;</span> 
     </div> 
     <div class="data"> 
      <select name="fromCurrency" id="fromCurrency"> 
       <option selected="" value="GBP">GBP</option> 
      </select> 
     </div> 
     <div class="data"> 
      <select name="toCurrency" id="toCurrency"> 
       <option value="EUR">EUR</option> 
      </select> 
     </div> 
    </div> 

    <div style="currencyInner" id="calcresults"></div> 

    <div class="clr">&nbsp;</div> 

    <div class="data"> 
     <input class="btn btn-primary" type="button" name="convert" id="convert" value="Pretvori &raquo;" /> 
     <button class="btn" class="clickover" data-toggle='button' data-dismiss="clickover">Zapri</button> 
    </div> 
</div> 

:

이

<a class="pretvornik withajaxpopover" href="#" rel="clickover" title="Pretvornik valut" data-load="http://www.cheaperandmore.com/files/static_converter.html">Click here</a> 

이 HTML 파일의 내용 (http://www.cheaperandmore.com/files/static_converter.html)입니다 :

이 환율 계산기와 팝 오버를 트리거 HTML입니다 나는, TW를 팝 오버를 트리거 링크를 클릭하면 지금

<script type="text/javascript"> 
//Add close button to bootstrap popovers 
$('[rel="clickover"]').clickover(); 

//Load data 
$('.withajaxpopover').bind('click',function(){ 
    var el=$(this); 
    $.get(el.attr('data-load'),function(d){ 
     el.unbind('click').popover({content: d}).popover('show'); 
    }); 
}); 
</script> 

:

이 자바 스크립트입니다 o popovers가 나타납니다.

하나의 popover에 static_converter.html의 콘텐츠가 있지만 clickover class "popover fade right in"이 누락되었습니다. 첫 번째 뒤에 숨어있는 다른 popover는 "popover clickover fade right in"이라는 올바른 클래스를 가지고 있지만 제목 이외의 내용은 a.pretvornik.withajaxpower title 태그에서 가져온 것입니다.

첫 번째 팝 오버에서 닫기 버튼을 클릭하면 두 번째 팝 오버가 실제로 닫힙니다 (클릭 오버 클래스가 있으므로). 내가 뭘 잘못하고 있는지 알 수 없습니다.

여기에서 볼 수 있습니다 : http://www.cheaperandmore.com (페이지 왼쪽 상단의 첫 번째 반원에서 "£»€"를 클릭하십시오).

도움을 주시면 감사하겠습니다.

Answer 1

플러그인이 Twitter Bootstrap 팝업 플러그인에서 상속 된 것 같습니다. .popover() (또는 그 반대)을 호출하면 .clickover()으로 전화하지 않아도됩니다.

당신은 내가 그것을 preferred since 1.7을 때문에 bind 및 unbindon 및 off 변경의 자유를했다

<script type="text/javascript"> 

//Load data and bind clickover 
$('.withajaxpopover').on('click.ajaxload',function(){ 
    var el=$(this); 
    $.get(el.attr('data-load'),function(d){ 
     el.off('click.ajaxload').clickover({content: d}).clickover('show'); 
    }); 
}); 
</script> 

것을 시도해야합니다.

또한 충돌을 피하기 위해 event nameclick.ajaxload을 추가했지만 사용자가 바인딩을 해제하기 때문에 .one()을 조사해야합니다. 당신은 아약스 로딩 부분이없는 clickovers이있는 경우

---

, 당신은 두 개의 선택기를 만들어 각각 다른 플러그인 clickover를 사용하도록 설정해야합니다.

예를 들어 .withajaxpopover 요소에서 rel="clickover" 속성을 제거하고 위의 코드를 모두 $('[rel="clickover"]').clickover();으로 유지할 수 있습니다.