BootstrapX 弹出框和关闭按钮

Question

我正在使用基于 Twitter Bootstrap v2.1.1 的模板开发 Joomla 2.5 网站。

我还在使用 BootstrapX - clickover，这是一个 Bootstrap 扩展，允许通过点击元素而不是悬停或聚焦来打开和关闭弹出框：https://github.com/lecar-red/bootstrapx-clickover。

在弹出窗口中，我使用简单的 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>

现在，当我点击触发弹出框的链接时，会出现两个弹出框。

一个弹出框包含来自 static_converter.html 的内容，但它缺少点击类“弹出框淡入”。 隐藏在第一个弹出框后面的其他弹出框具有正确的类“弹出框点击淡入”，但除了取自 a.pretvornik.withajaxpower 标题标签的标题之外，它没有其他内容。

因此，当我在第一个弹出窗口中单击关闭按钮时，它实际上会关闭第二个弹出窗口（因为它具有 clickover 类）。 我不知道我做错了什么。

您可以在此处查看：http://www.cheaperandmore.com（点击页面左上角第一个半圆中的“£ » €”）。

任何帮助将不胜感激。

Answer 1

该插件似乎继承自 Twitter Bootstrap 弹出插件：这意味着如果您调用 .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 name click.ajaxload 以避免冲突，但您应该查看.one()，因为它会为您解除绑定。

---

如果您有没有 ajax 加载部分的 clickover，您应该制作两个单独的选择器，并在每个选择器上启用不同的 clickover 插件。

例如，您可以删除.withajaxpopover 元素上的rel="clickover" 属性，并保留$('[rel="clickover"]').clickover(); 和上面的代码。