BootstrapX彈出窗口和關閉按鈕

Question

我正在開發基於Twitter Bootstrap v2.1.1的模板的Joomla 2.5網站。

我還使用BootstrapX - clickover，一個Bootstrap擴展以允許打開和關閉點擊元素而不是懸停或焦點的彈出窗口：https://github.com/lecar-red/bootstrapx-clickover。

在popover我打電話與簡單的AJAX貨幣轉換器的HTML文件。

這是HTML觸發酥料餅與貨幣轉換器：

<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）：

<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> 

這是JavaScript的：

<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> 

現在，當我點擊觸發酥料餅，TW一個鏈接o彈出窗口出現。

一個popover內容來自static_converter.html，但它缺少clickover類「popover淡入」。 其他彈出窗口，隱藏在第一個彈出窗口中的彈出窗口正確的類別「popover clickover fade right in」，但它沒有內容，除了來自a.pretvornik.withajaxpower標題標籤的標題外。

因此，當我點擊第一個彈出窗口中的關閉按鈕時，它實際上會關閉第二個彈出窗口（因爲它有clickover類）。 我無法弄清楚我做錯了什麼。

您可以在這裏看到：http://www.cheaperandmore.com（點擊頁面左上角第一個半圓上的「£»€」）。

任何幫助，將不勝感激。

Answer 1

看起來這個插件繼承自Twitter Bootstrap popover插件：這意味着如果你調用.popover()（或者相反），則不需要調用.clickover()。

你應該嘗試的

<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> 

我把改變bind和unbind到on和off，因爲它是preferred since 1.7的自由。

我還增加了event nameclick.ajaxload避免衝突，但你應該看看.one()，因爲它解除綁定你。

---

如果您有沒有AJAX裝載部分clickovers，你應該讓兩個獨立的選擇並啓用clickover每個插件不同。

例如，您可以刪除.withajaxpopover元素上的rel="clickover"屬性，並保留$('[rel="clickover"]').clickover();和上面的代碼。