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();和上面的代码。