0

我正在使用基于 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（单击页面左上角第一个半圆中的“£ » €”）。

任何帮助，将不胜感激。

4

1 回答 1

1

.clickover()该插件似乎继承自 Twitter Bootstrap popover 插件：这意味着如果您调用.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>

我冒昧地更改bindand unbindto onandoff因为它是自 1.7 以来的首选。

我还添加了一个事件名称 click.ajaxload以避免冲突，但您应该考虑一下，.one()因为它会为您解除绑定。

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

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

于 2013-01-07T19:56:53.027 回答