Question

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

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

在popover中我使用简单的AJAX货币转换器调用HTML文件。

这是使用货币转换器触发popover的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>

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

一个popover包含来自static_converter.html的内容，但它缺少点击类“popover fade right in”。隐藏在第一个popover后面的其他popover具有正确的类“popover clickover fade right in”，但它没有内容，除了标题取自a.pretvornik.withajaxpower标题标记。

因此，当我在第一个popover中单击关闭按钮时，它实际上关闭了第二个popover（因为它有clickover类）。我无法弄清楚我做错了什么。

你可以在这里看到它：http://www.cheaperandmore.com（点击页面左上角第一个半圆中的“£»€”。

任何帮助都将不胜感激。

Answer 1

该插件似乎继承自Twitter Bootstrap popover插件：这意味着如果您拨打.clickover()（或者恰恰相反），则无需致电.popover()。

你应该试试

<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加载部分的点击，你应该制作两个单独的选择器，并在每个选择器上启用不同的点击过滤插件。

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

BootstrapX弹出窗口和关闭按钮

1 个答案: